<template>
  <div class="container">
    <!--  试卷异常   -->
    <div class="sign_box" v-if="showErrorState && showErrorSign">
      <div class="sign">
        <div>
          <i class="el-icon-warning"></i>
          因【题库中题目被删除】或【抽题容器/随机策略中题目被复用】，导致配分异常，请重新编辑【{{
            operationTypeText[examType]
          }}配分】并发布{{ operationTypeText[examType] }}
        </div>
        <i @click="showErrorSign = false" class="el-icon-close pointer"></i>
      </div>
    </div>
    <div class="main_content">
      <div class="main_content_top">
        <div class="top_left">
          <ancestorsNameDeal
            :text="paperInfo.title"
            :maxLength="stepIndex == 0 ? 70 : 100"
          >
          </ancestorsNameDeal>
        </div>
        <div class="top_right" v-show="stepIndex == 0">
          <div class="text">
            {{ bigTitleNum }}大题 <span></span> {{ smallTitleNum }}小题
            <span></span> {{ totalScore }}分
          </div>
          <div
            v-if="!globalDisabled"
            @click="showSettingScore"
            class="score_btn"
            type="primary"
            icon="score"
          >
            <svg-icon class-name="score-icon" icon-class="score"/>
            {{ operationTypeText[examType] }}配分
          </div>
          <template v-if="globalDisabled">
            <div
              @click="nextInfo"
              class="score_btn"
              type="primary"
              icon="score"
            >
              查看{{ operationTypeText[examType] }}详情
            </div>
            <div
              @click="showSettingScore"
              class="score_btn"
              type="primary"
              icon="score"
            >
              <svg-icon class-name="score-icon" icon-class="score"/>
              试卷配分
            </div>
          </template>
        </div>
        <div class="top_right" v-show="stepIndex == 1">
          <template v-if="globalDisabled">
            <div
              @click="stepIndex = 0"
              class="score_btn"
              type="primary"
              icon="score"
            >
              返回组卷页面
            </div>
          </template>
        </div>
      </div>
      <!--  组卷信息    -->
      <div v-show="stepIndex == 0" class="main_content_mid">
        <!--   左侧题目统计区域     -->
        <div class="mid_left">
          <div class="left_top">
            <!--   添加大题按钮     -->
            <div
              v-loading="showBigLoading"
              class="top_botton"
              v-if="!globalDisabled"
            >
              <div
                @click="btnClick(item)"
                class="add_btn"
                v-for="(item, index) in btnList"
                :key="index"
              >
                <svg-icon class-name="add-icon" icon-class="add"/>
                {{ item.name }}
                <el-tooltip effect="dark" placement="top">
                  <div slot="content">
                    <div v-if="item.type == 1">
                      1、添加题目组成大题。<br/>
                      2、添加小题时不赋分，删除已配分小题时，系统自动更新大题分数。<br/>
                      （每位考生该部分题目内容相同）
                    </div>
                    <div v-if="item.type == 2">
                      1、点击【添加抽题容器】，再点击【抽题管理】，添加题目；<br/>
                      2、设置抽题规则和数量；<br/>
                      3、系统根据设定的规则，从抽题容器中随机抽取指定数量的题目生成大题。<br/>
                      4、已配分的抽题容器变更题目数量时，系统自动更新大题分数。<br/>
                      （每位考生该部分题目内容相同）
                    </div>
                    <div v-if="item.type == 3">
                      1、点击【添加随机策略】，选择知识点和题型；<br/>
                      2、设置各难度题目的抽题数量；<br/>
                      3、系统根据设定的规则，随机抽取指定数量的题目，生成大题。<br/>
                      4、已配分的随机策略变更题目数量时，系统自动更新大题分数。<br/>
                      （每位考生该部分题目内容相同）
                    </div>
                  </div>
                  <svg-icon
                    class-name="question-icon"
                    icon-class="question_bg"
                  />
                </el-tooltip>
              </div>
            </div>
            <!--   左侧题目导航     -->
            <div class="topic_collect">
              <div
                v-for="(labelItem, labelIndex) in topicLabelList"
                :key="labelIndex"
              >
                <div
                  @click="scrollToAnchor(labelItem.bigTitleId)"
                  class="topic_big_title pointer"
                >
                  {{ labelItem.bigTitle }}
                </div>
                <div class="topic_index_collect">
                  <div
                    @click="scrollToAnchor(topicItem.topicId)"
                    class="topic_index"
                    v-for="(topicItem, topicIndex) in labelItem.topicList"
                    :key="topicIndex"
                  >
                    {{ topicIndex + 1 }}
                  </div>
                </div>
              </div>
              <div class="empty_box" v-if="topicLabelList.length == 0">
                <el-empty
                  :image-size="80"
                  image="https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/wx/empty_img_topiv.png"
                  description="暂无试题"
                ></el-empty>
              </div>
            </div>
          </div>
          <!--    环形图    -->
          <div class="left_bottom relative">
            <div class="tabs relative">
              <div
                class="tab"
                @click="changeTabs(1)"
                :class="{ selected: chartType == 1 }"
              >
                题型分析
              </div>
              <div
                class="tab"
                @click="changeTabs(2)"
                :class="{ selected: chartType == 2 }"
              >
                难度分析
              </div>
              <div
                class="line"
                :class="{ selected_line: chartType == 2 }"
              ></div>
            </div>
            <div class="sign" v-if="chartType == 1">
              注：题型分析仅统计固定大题
            </div>
            <div class="chart_item" ref="topic_ref"></div>
          </div>
        </div>
        <!--   右侧试卷组题详情     -->
        <div class="mid_right" v-loading="showPaperLoading">
          <!--   试卷组题集合    -->
          <div class="question_collect" v-if="titleList.length > 0">
            <transition-group tag="div">
              <div
                class="fixed_big_question"
                v-for="(item, index) in titleList"
                :key="item.id"
              >
                <!--  大题操作区域     -->
                <div class="big_top" :id="item.id">
                  <div class="top_left">
                    <div
                      :class="{ error_checked: item.showErrorClass }"
                      class="big_title"
                      v-if="!item.editTitle"
                    >
                      {{ item.title }}
                    </div>
                    <div class="big_title" v-if="item.editTitle">
                      <el-input
                        maxlength="10"
                        @blur="item.editTitle = false"
                        @change="editBigTitle(item)"
                        v-model="item.title"
                        ref="edit_title_ref"
                        placeholder="请输入标题"
                        size="mini"
                      ></el-input>
                    </div>
                    <template v-if="!globalDisabled">
                      <i
                        v-if="!item.editTitle"
                        @click="showEditIpt(item)"
                        class="el-icon-edit pointer icon_hover"
                      ></i>
                    </template>
                    <div class="big_score">
                      (共{{ item.topicNum ? item.topicNum : '--' }}小题，共{{
                        item.score ? item.score : '--'
                      }}分)
                    </div>
                  </div>
                  <div class="top_right">
                    <!--   固定大题才有题目乱序选项     -->
                    <el-checkbox
                      :disabled="globalDisabled"
                      @change="editOutOfOrder(item)"
                      v-if="item.type == 1"
                      v-model="item.topicUnsort"
                    >题目乱序
                    </el-checkbox>
                    <el-checkbox
                      :disabled="globalDisabled"
                      @change="editOutOfOrder(item)"
                      v-model="item.optionUnsort"
                    >选项乱序
                    </el-checkbox
                    >
                    <div class="icon_box" v-if="!globalDisabled">
                      <svg-icon
                        @click="turnUp(index)"
                        :class="{ disabled: index == 0 }"
                        class-name="noarmal_icon icon_hover pointer"
                        icon-class="up_icon"
                      />
                      <svg-icon
                        @click="turnDown(index)"
                        :class="{ disabled: index == titleList.length - 1 }"
                        class-name="noarmal_icon icon_hover pointer"
                        icon-class="down_icon"
                      />
                      <i
                        @click="removeTitleTopic(item)"
                        class="el-icon-delete icon_hover pointer"
                      ></i>
                    </div>
                    <div
                      @click="item.hideTable = !item.hideTable"
                      class="collapse_box pointer"
                    >
                      <span>{{ item.hideTable ? '展开' : '收起' }}</span>
                      <svg-icon
                        v-if="!item.hideTable"
                        class-name="collapse_svg "
                        icon-class="collapse_close"
                      />
                      <svg-icon
                        v-if="item.hideTable"
                        class-name="collapse_svg"
                        icon-class="collapse_open"
                      />
                    </div>
                  </div>
                </div>
                <!--   固定大题部分     -->
                <template v-if="item.type == 1">
                  <!--  固定大题table区域     -->
                  <div
                    :class="{ hide_height: item.hideTable }"
                    class="big_table"
                  >
                    <el-table
                      :ref="`topicTable${item.id}Ref`"
                      :header-cell-style="tableHeaderStyle"
                      :data="item.topicList"
                      @selection-change="handleSelectionSelect($event, item)"
                      class="cum_table"
                    >
                      <el-table-column
                        v-if="multiDelete"
                        width="55"
                        type="selection"
                        align="center"
                      ></el-table-column>
                      <!--  拖拽排序      -->
                      <el-table-column
                        v-if="enterState != 'detail'"
                        prop="sort"
                        label=""
                        width="60"
                        align="center"
                      >
                        <template slot-scope="scope">
                          <div class="moved">
                            <svg-icon
                              class-name="darg_svg"
                              icon-class="darg_svg"
                            ></svg-icon>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column label="序号" align="center">
                        <template slot-scope="scope">
                          <div class="serial_number">
                            {{ scope.$index + 1 }}
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="题干"
                        width="500"
                        align="left"
                        prop="content"
                      >
                        <template slot-scope="scope">
                          <div
                            @click="getByEditor(3, scope.row.content)"
                            :class="{
                              content_html: $isIncludesHtml(scope.row.content),
                            }"
                            class="line_feed w_fixed overtxt"
                          >
                            {{ scope.row.content }}
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="题型"
                        align="center"
                        prop="topicType"
                      >
                        <template slot-scope="scope">
                          <div :id="`fixed-${scope.row.id}`">
                            {{
                              $store.getters.topicTypeText[scope.row.topicType]
                            }}
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="难度"
                        align="center"
                        prop="difficulty"
                      >
                        <template slot-scope="scope">
                          <div>
                            {{
                              $store.getters.difficultyText[
                                scope.row.difficulty
                                ]
                            }}
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="分值"
                        align="center"
                        prop="score"
                      ></el-table-column>
                      <el-table-column
                        label="操作"
                        width="100"
                        align="center"
                        v-if="!globalDisabled"
                      >
                        <template slot-scope="scope">
                          <div class="icon_box">
                            <i
                              @click="editTopic(item, scope.row)"
                              class="el-icon-edit color_hover pointer"
                            ></i>
                            <i
                              @click="delFixTopic(scope.row, item)"
                              class="el-icon-delete color_hover pointer"
                            ></i>
                          </div>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                  <!--  固定大题操作区域    -->
                  <div class="big_btns" v-if="!globalDisabled">
                    <div @click="addTopic(item)" class="blue_btn">
                      <svg-icon class-name="btn_icon" icon-class="add_svg"/>
                      手动录入试题
                    </div>
                    <div @click="showTopicBank(item)" class="orange_btn">
                      <svg-icon class-name="btn_icon" icon-class="muttle_svg"/>
                      从试题库选择
                    </div>
                    <el-dropdown>
                      <div class="green_btn">
                        <svg-icon class-name="btn_icon" icon-class="AI_svg"/>
                        AI出题
                      </div>
                      <el-dropdown-menu slot="dropdown">
                        <div @click="showAiTopic(1, item)">
                          <el-dropdown-item>基于课程内容</el-dropdown-item>
                        </div>
                        <div @click="showAiTopic(0, item)">
                          <el-dropdown-item>联网出题</el-dropdown-item>
                        </div>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                </template>
                <!--   抽题大题部分    -->
                <template v-if="item.type == 2">
                  <!--  抽题大题table区域     -->
                  <div
                    :class="{ hide_height: item.hideTable }"
                    class="big_table"
                  >
                    <el-table
                      v-loading="item.tableLoading"
                      :ref="`topicTable${item.id}Ref`"
                      :header-cell-style="tableHeaderStyle"
                      :data="item.containerList"
                      @selection-change="handleSelectionSelect($event, item)"
                      class="cum_table"
                    >
                      <el-table-column
                        v-if="multiDelete"
                        width="55"
                        type="selection"
                        align="center"
                      ></el-table-column>
                      <el-table-column label="序号" align="center">
                        <template slot-scope="scope">
                          <div class="serial_number">
                            {{ scope.$index + 1 }}
                          </div>
                        </template>
                      </el-table-column>
                      <!--  拖拽排序      -->
                      <!--                      <el-table-column v-if="enterState!='detail'" prop="sort" label="" width="60" align="center">-->
                      <!--                        <template slot-scope="scope">-->
                      <!--                          <div class="moved">-->
                      <!--                            <svg-icon class-name="darg_svg" icon-class="darg_svg"></svg-icon>-->
                      <!--                          </div>-->
                      <!--                        </template>-->
                      <!--                      </el-table-column>-->
                      <el-table-column
                        label="抽题容器"
                        width="160"
                        align="center"
                      >
                        <template slot-scope="scope">
                          <div
                            :id="`container-${scope.row.id}`"
                            @click="showEditContainer(scope.row)"
                            class="btn_content"
                          >
                            抽题管理（{{ scope.row.totalNum }}）
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="抽题数量"
                        align="center"
                        prop="extractNum"
                      ></el-table-column>
                      <el-table-column
                        label="不限难度"
                        width="120"
                        align="center"
                      >
                        <template slot-scope="scope">
                          <div class="difficulty_ipt">
                            <div v-if="globalDisabled">
                              {{ scope.row.unlimitedNum }}
                            </div>
                            <el-input-number
                              v-else
                              :class="{
                                border_red: scope.row.returnBolByNums(
                                  scope.row,
                                  'unlimitedNum',
                                  'optionalUnlimitedNum'
                                ),
                              }"
                              @change="
                                updateContainerNums(
                                  scope.row,
                                  'unlimitedNum',
                                  'optionalUnlimitedNum'
                                )
                              "
                              v-model="scope.row.unlimitedNum"
                              :min="0"
                              :precision="0"
                              :controls="false"
                              size="mini"
                            />
                            <div class="m_5">/</div>
                            <div class="w_optional">
                              {{ scope.row.optionalUnlimitedNum }}
                            </div>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column label="简单" width="120" align="center">
                        <template slot-scope="scope">
                          <div class="difficulty_ipt">
                            <div v-if="globalDisabled">
                              {{ scope.row.easyNum }}
                            </div>
                            <el-input-number
                              v-else
                              :class="{
                                border_red: scope.row.returnBolByNums(
                                  scope.row,
                                  'easyNum',
                                  'optionalEasyNum'
                                ),
                              }"
                              @change="
                                updateContainerNums(
                                  scope.row,
                                  'easyNum',
                                  'optionalEasyNum'
                                )
                              "
                              v-model="scope.row.easyNum"
                              :min="0"
                              :precision="0"
                              :controls="false"
                              size="mini"
                            />
                            <div class="m_5">/</div>
                            <div class="w_optional">
                              {{ scope.row.optionalEasyNum }}
                            </div>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column label="中等" width="120" align="center">
                        <template slot-scope="scope">
                          <div class="difficulty_ipt">
                            <div v-if="globalDisabled">
                              {{ scope.row.normalNum }}
                            </div>
                            <el-input-number
                              v-else
                              :class="{
                                border_red: scope.row.returnBolByNums(
                                  scope.row,
                                  'normalNum',
                                  'optionalNormalNum'
                                ),
                              }"
                              @change="
                                updateContainerNums(
                                  scope.row,
                                  'normalNum',
                                  'optionalNormalNum'
                                )
                              "
                              v-model="scope.row.normalNum"
                              :min="0"
                              :precision="0"
                              :controls="false"
                              size="mini"
                            />
                            <div class="m_5">/</div>
                            <div class="w_optional">
                              {{ scope.row.optionalNormalNum }}
                            </div>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column label="困难" width="120" align="center">
                        <template slot-scope="scope">
                          <div class="difficulty_ipt">
                            <div v-if="globalDisabled">
                              {{ scope.row.hardNum }}
                            </div>
                            <el-input-number
                              v-else
                              :class="{
                                border_red: scope.row.returnBolByNums(
                                  scope.row,
                                  'hardNum',
                                  'optionalHardNum'
                                ),
                              }"
                              @change="
                                updateContainerNums(
                                  scope.row,
                                  'hardNum',
                                  'optionalHardNum'
                                )
                              "
                              v-model="scope.row.hardNum"
                              :min="0"
                              :precision="0"
                              :controls="false"
                              size="mini"
                            />
                            <div class="m_5">/</div>
                            <div class="w_optional">
                              {{ scope.row.optionalHardNum }}
                            </div>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="每题分值"
                        align="center"
                        prop="score"
                      ></el-table-column>
                      <el-table-column
                        label="操作"
                        width="100"
                        align="center"
                        v-if="!globalDisabled"
                      >
                        <template slot-scope="scope">
                          <div class="icon_box">
                            <i
                              @click="removeContainer(scope.row)"
                              class="el-icon-delete color_hover pointer"
                            ></i>
                          </div>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                  <!--  抽题大题操作区域    -->
                  <div class="big_btns" v-if="!globalDisabled">
                    <div @click="addQuestionContainer(item)" class="blue_btn">
                      <svg-icon class-name="btn_icon" icon-class="add_svg"/>
                      添加抽题容器
                    </div>
                  </div>
                </template>
                <!--   随机大题部分    -->
                <template v-if="item.type == 3">
                  <!--  随机大题table区域     -->
                  <div
                    :class="{ hide_height: item.hideTable }"
                    class="big_table"
                  >
                    <el-table
                      v-loading="item.tableLoading"
                      :header-cell-style="tableHeaderStyle"
                      :data="item.tacticsList"
                      class="cum_table"
                      :ref="`topicTable${item.id}Ref`"
                      @selection-change="handleSelectionSelect($event, item)"
                    >
                      <el-table-column
                        v-if="multiDelete"
                        width="55"
                        type="selection"
                        align="center"
                      ></el-table-column>
                      <el-table-column label="序号">
                        <template slot-scope="scope">
                          <div class="serial_number">
                            {{ scope.$index + 1 }}
                          </div>
                        </template>
                      </el-table-column>
                      <!--  拖拽排序      -->
                      <!--                      <el-table-column v-if="enterState!='detail'" prop="sort" label="" width="60" align="center">-->
                      <!--                        <template slot-scope="scope">-->
                      <!--                          <div class="moved">-->
                      <!--                            <svg-icon class-name="darg_svg" icon-class="darg_svg"></svg-icon>-->
                      <!--                          </div>-->
                      <!--                        </template>-->
                      <!--                      </el-table-column>-->
                      <el-table-column label="知识点">
                        <template slot-scope="scope">
                          <div class="difficulty_ipt">
                            <el-cascader
                              :disabled="globalDisabled"
                              :id="`tactics-${scope.row.id}`"
                              @change="updateTacticsInfo(scope.row)"
                              size="mini"
                              v-removeAriaHidden
                              v-model="scope.row.indexId"
                              :options="courseIndexTree"
                              filterable
                              clearable
                              :props="{
                                expandTrigger: 'click',
                                checkStrictly: true,
                                emitPath: false,
                                value: 'id',
                                label: 'name',
                              }"
                            >
                            </el-cascader>
                            <i
                              v-if="!globalDisabled"
                              @click="editTactics(scope.row)"
                              class="el-icon-edit color_hover pointer"
                            ></i>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column label="题型" width="120">
                        <template slot-scope="scope">
                          <div class="difficulty_ipt">
                            <el-select
                              :disabled="globalDisabled"
                              @change="updateTacticsInfo(scope.row)"
                              size="mini"
                              filterable
                              v-model.number="scope.row.topicType"
                              placeholder="请选择题型"
                            >
                              <el-option
                                v-for="dict in dict.type.topic_type"
                                :key="Number(dict.value)"
                                :label="dict.label"
                                :value="Number(dict.value)"
                              />
                            </el-select>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="不限难度"
                        width="120"
                        align="center"
                      >
                        <template slot-scope="scope">
                          <div class="difficulty_ipt">
                            <div v-if="globalDisabled">
                              {{ scope.row.unlimitedNum }}
                            </div>
                            <el-input-number
                              v-else
                              :class="{
                                border_red: scope.row.returnBolByNums(
                                  scope.row,
                                  'unlimitedNum',
                                  'optionalUnlimitedNum'
                                ),
                              }"
                              @change="
                                updateTacticsNums(
                                  scope.row,
                                  'unlimitedNum',
                                  'optionalUnlimitedNum'
                                )
                              "
                              v-model="scope.row.unlimitedNum"
                              :min="0"
                              :precision="0"
                              :controls="false"
                              size="mini"
                            />
                            <div class="m_5">/</div>
                            <div class="w_optional">
                              {{ scope.row.optionalUnlimitedNum }}
                            </div>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column label="简单" width="120" align="center">
                        <template slot-scope="scope">
                          <div class="difficulty_ipt">
                            <div v-if="globalDisabled">
                              {{ scope.row.easyNum }}
                            </div>
                            <el-input-number
                              v-else
                              :class="{
                                border_red: scope.row.returnBolByNums(
                                  scope.row,
                                  'easyNum',
                                  'optionalEasyNum'
                                ),
                              }"
                              @change="
                                updateTacticsNums(
                                  scope.row,
                                  'easyNum',
                                  'optionalEasyNum'
                                )
                              "
                              v-model="scope.row.easyNum"
                              :min="0"
                              :precision="0"
                              :controls="false"
                              size="mini"
                            />
                            <div class="m_5">/</div>
                            <div class="w_optional">
                              {{ scope.row.optionalEasyNum }}
                            </div>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column label="中等" width="120" align="center">
                        <template slot-scope="scope">
                          <div class="difficulty_ipt">
                            <div v-if="globalDisabled">
                              {{ scope.row.normalNum }}
                            </div>
                            <el-input-number
                              v-else
                              :class="{
                                border_red: scope.row.returnBolByNums(
                                  scope.row,
                                  'normalNum',
                                  'optionalNormalNum'
                                ),
                              }"
                              @change="
                                updateTacticsNums(
                                  scope.row,
                                  'normalNum',
                                  'optionalNormalNum'
                                )
                              "
                              v-model="scope.row.normalNum"
                              :min="0"
                              :precision="0"
                              :controls="false"
                              size="mini"
                            />
                            <div class="m_5">/</div>
                            <div class="w_optional">
                              {{ scope.row.optionalNormalNum }}
                            </div>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column label="困难" width="120" align="center">
                        <template slot-scope="scope">
                          <div class="difficulty_ipt">
                            <div v-if="globalDisabled">
                              {{ scope.row.hardNum }}
                            </div>
                            <el-input-number
                              v-else
                              :class="{
                                border_red: scope.row.returnBolByNums(
                                  scope.row,
                                  'hardNum',
                                  'optionalHardNum'
                                ),
                              }"
                              @change="
                                updateTacticsNums(
                                  scope.row,
                                  'hardNum',
                                  'optionalHardNum'
                                )
                              "
                              v-model="scope.row.hardNum"
                              :min="0"
                              :precision="0"
                              :controls="false"
                              size="mini"
                            />
                            <div class="m_5">/</div>
                            <div class="w_optional">
                              {{ scope.row.optionalHardNum }}
                            </div>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="每题分值"
                        align="center"
                        prop="score"
                      ></el-table-column>
                      <el-table-column
                        label="操作"
                        width="100"
                        align="center"
                        v-if="!globalDisabled"
                      >
                        <template slot-scope="scope">
                          <div class="icon_box">
                            <i
                              @click="delTactics(scope.row)"
                              class="el-icon-delete color_hover pointer"
                            ></i>
                          </div>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                  <!--  随机大题操作区域    -->
                  <div class="big_btns" v-if="!globalDisabled">
                    <div @click="addTactics(item)" class="blue_btn">
                      <svg-icon class-name="btn_icon" icon-class="add_svg"/>
                      添加随机策略
                    </div>
                  </div>
                </template>
              </div>
            </transition-group>
          </div>
          <div class="question_collect" v-if="titleList.length == 0">
            <div class="empty_box">
              <el-empty
                :image-size="80"
                image="https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/wx/empty_img_topiv.png"
                description="请先点击左上角选择要添加的大题类型"
              ></el-empty>
            </div>
          </div>
          <!--   操作按钮    -->
          <div class="operation_button" v-if="!globalDisabled">
            <div class="left">
              <div
                v-if="!multiDelete"
                @click="showSmallTpoicDellete"
                class="delete_btn"
              >
                批量删除
              </div>
              <div class="close_box" v-else>
                <el-checkbox v-model="allMultiDelete"></el-checkbox>
                <div @click="sureMultiDelete" class="delete_btn">删除</div>
                <div @click="closeMultiDelete" class="close_btn">取消</div>
              </div>
            </div>
            <div class="right">
              <div class="sign_text">注：请点击“下一步”并“更新{{ operationTypeText[examType] }}”</div>
              <div class="download_btn"  @click="downloadPaper" v-if="teacherId==principalId">下载试卷</div>
              <div class="preview_btn" @click="previewPaper">预览</div>
              <div ref="nextStepRef" class="sure_btn" @click="nextStep">
                下一步
              </div>
            </div>
          </div>
          <div class="operation_button" v-else>
            <div class="left"></div>
            <div class="right">
              <div class="download_btn" @click="downloadPaper" v-if="teacherId==principalId">下载试卷</div>
              <div class="preview_btn" @click="previewPaper">预览</div>
              <div class="sure_btn" @click="closeWindow">关闭</div>
            </div>
          </div>
        </div>
      </div>
      <!--  考核配置信息    -->
      <div v-show="stepIndex == 1" class="step_mid">
        <div class="content_box">
          <el-form
            :disabled="globalDisabled"
            @submit.native.prevent
            ref="formRef"
            :model="paperInfo"
            :rules="formRules"
            label-width="120px"
          >
            <el-form-item
              :label="`${operationTypeText[examType]}时长`"
              prop="durationType"
            >
              <el-radio-group
                v-removeAriaHidden
                v-model="paperInfo.durationType"
              >
                <div class="radio_item">
                  <el-radio :label="1">
                    限时长
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="学生开始作答后，超出固定时间系统将自动提交试卷"
                      placement="top"
                    >
                      <i class="el-icon-question shou"></i>
                    </el-tooltip>
                    <el-input-number
                      placeholder="请输入"
                      :disabled="paperInfo.durationType == 2"
                      class="input_number ml10"
                      v-model="paperInfo.duration"
                      :min="0"
                      :precision="0"
                      size="mini"
                    />
                    分钟
                  </el-radio>
                </div>
                <div class="radio_item">
                  <el-radio :label="2">
                    不限时长
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="不限制学生答题时间"
                      placement="top"
                    >
                      <i class="el-icon-question shou"></i>
                    </el-tooltip>
                  </el-radio>
                </div>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              v-if="examType == 1"
              label="及格分"
              prop="passingGrade"
            >
              <el-input-number
                placeholder="请输入"
                class="input_number"
                v-model="paperInfo.passingGrade"
                :min="0.1"
                :max="totalScore"
                :precision="1"
                size="mini"
              />
              <span style="color: #606266;font-weight: bold"> 分 </span>
              <span class="total_score_tips">（总分：{{ totalScore }}分）</span>
            </el-form-item>
            <el-form-item v-if="examType == 6 || examType == 3" label="总分">
              <span class="total_score_tips">{{ totalScore }} 分</span>
            </el-form-item>
            <el-form-item
              v-if="examType != 3"
              label="多选题漏选"
              prop="scoringMethod"
            >
              <el-radio-group
                v-removeAriaHidden
                v-model="paperInfo.scoringMethod"
              >
                <el-radio :label="1">
                  按正确选项个数占比得分
                  <el-tooltip class="item" effect="dark" placement="top">
                    <div slot="content">
                      <div>如一道3分的多选题，正确答案是ABC。</div>
                      <div>考生答案是A时，得1分。</div>
                      <div>考生答案是AB时，得2分。</div>
                    </div>
                    <i class="el-icon-question shou ml5"></i>
                  </el-tooltip>
                </el-radio>
                <el-radio :label="2">
                  漏选只得试题分数的
                  <el-input-number
                    placeholder="请输入"
                    :disabled="paperInfo.scoringMethod == 1"
                    class="input_number ml10"
                    v-model="paperInfo.fixedPercent"
                    :min="0"
                    :max="100"
                    :precision="0"
                    size="mini"
                  />
                  %
                  <el-tooltip class="item" effect="dark" placement="top">
                    <div slot="content">
                      <div>如一道2分的多选题，设定漏选得分比例25%。</div>
                      <div>考生漏选时，将得2*25%=0.5分</div>
                    </div>
                    <i class="el-icon-question shou ml5"></i>
                  </el-tooltip>
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              v-if="examType != 3"
              :label="`${operationTypeText[examType]}提交人`"
              prop="submitType"
            >
              <el-radio-group
                v-removeAriaHidden
                @change="changeSubmitType"
                v-model="paperInfo.submitType"
              >
                <el-radio :label="1">
                  所有学生
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="每位学生提交一份试卷"
                    placement="top"
                  >
                    <i class="el-icon-question shou"></i>
                  </el-tooltip>
                </el-radio>
                <el-radio :label="2">
                  仅组长
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="每个小组仅组长提交一份试卷"
                    placement="top"
                  >
                    <i class="el-icon-question shou"></i>
                  </el-tooltip>
                </el-radio>
              </el-radio-group>
              <div style="color: #ff9b0f">
                注：仅组长提交/组长评价/组内互评需教师在教学过程中创建小组，设定组长
              </div>
            </el-form-item>
            <template v-if="examType != 3">
              <el-form-item
                label-width="240px"
                :label="`${operationTypeText[examType]}分值权重`"
                prop="scoreWeightTypes"
              >
                <el-checkbox-group
                  v-model="scoreWeightTypes"
                  :min="1"
                  :max="paperInfo.submitType == 2 ? 4 : 3"
                >
                  <div class="mt_10">
                    <el-checkbox label="1" key="1">教师评价(%)：</el-checkbox>
                    <el-input-number
                      placeholder="请输入教师评价权重"
                      :disabled="!scoreWeightTypes.includes('1')"
                      class="input_number_score"
                      v-model="paperInfo.teacherScorePercent"
                      :min="0"
                      :max="100"
                      :precision="0"
                      :controls="false"
                      size="mini"
                    />
                  </div>
                  <div class="mt_10">
                    <el-checkbox label="2" key="2">学生自评(%)：</el-checkbox>
                    <el-input-number
                      placeholder="请输入学生自评权重"
                      :disabled="!scoreWeightTypes.includes('2')"
                      class="input_number_score"
                      v-model="paperInfo.selfScorePercent"
                      :min="0"
                      :max="100"
                      :precision="0"
                      :controls="false"
                      size="mini"
                    />
                  </div>
                  <div class="mt_10">
                    <el-checkbox label="3" key="3">组长评价(%)：</el-checkbox>
                    <el-input-number
                      placeholder="请输入组长评价权重"
                      :disabled="!scoreWeightTypes.includes('3')"
                      class="input_number_score"
                      v-model="paperInfo.leaderScorePercent"
                      :min="0"
                      :max="100"
                      :precision="0"
                      :controls="false"
                      size="mini"
                    />
                  </div>
                  <div class="mt_10" v-if="paperInfo.submitType == 2">
                    <el-checkbox label="4" key="4">组间互评(%)：</el-checkbox>
                    <el-input-number
                      placeholder="请输入组间互评权重"
                      :disabled="!scoreWeightTypes.includes('4')"
                      class="input_number_score"
                      v-model="paperInfo.otherGroupScorePercent"
                      :min="0"
                      :max="100"
                      :precision="0"
                      :controls="false"
                      size="mini"
                    />
                  </div>
                </el-checkbox-group>
              </el-form-item>
            </template>
            <el-form-item
              label="能力素养"
              prop="autoSettle"
              v-if="examType != 3 && courseType == 3"
            >
              <el-radio-group
                :disabled="autoSettleDisable"
                v-removeAriaHidden
                v-model="paperInfo.autoSettle"
              >
                <el-radio :label="true">
                  自动赋分
                  <el-tooltip
                    content="将自动为【能力素养项】赋客观题分数（批改时可修改）"
                    placement="top"
                  >
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </el-radio>
                <el-radio :label="false">
                  手动赋分
                  <el-tooltip
                    placement="top"
                    content="不自动为【能力素养项】赋分"
                  >
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </el-radio>
              </el-radio-group>
              <div class="ability_row">
                <div class="ability_label"></div>
                <div class="ability_content">
                  <div
                    v-show="item.paramList.length > 0"
                    class="ability_item"
                    v-for="(item, index) in stuEvaluateList"
                    :key="index"
                  >
                    <div
                      class="title"
                      :style="{ color: globalDisabled ? '#606266' : '#333333' }"
                    >
                      {{ item.name }}
                    </div>
                    <div class="param_list">
                      <div
                        class="param_item"
                        v-for="(paramItem, paramIndex) in item.paramList"
                        :key="paramIndex"
                      >
                        <el-checkbox
                          v-model="paramItem.checked"
                          :id="`param_${paramItem.id}`"
                        >
                          {{ paramItem.name }}
                        </el-checkbox>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div class="save_btns" v-if="!globalDisabled">
          <div class="sign">注：课程更新时根据最后一次操作判断考核是否更新</div>
          <div class="download_btn" @click="downloadPaper" v-if="teacherId==principalId">下载试卷</div>
          <div class="preview_btn" @click="previewPaper">预览</div>
          <div class="prev_btn" @click="prevStep">上一步</div>
          <div class="edit_btns" ref="editBtnsRef">
            <div class="only_save_btn" @click="saveTopicForm(false)">
              仅保存
              <el-tooltip
                content="保存本次编辑内容，课程更新时不会同步至正式课"
                placement="top"
              >
                <svg-icon
                  class-name="question_icon"
                  icon-class="question_svg"
                />
              </el-tooltip>
            </div>
            <div class="update_btn" @click="saveTopicForm(true)">
              更新{{ operationTypeText[examType] }}
              <el-tooltip
                content="更新课程草稿箱中的试卷，待课程更新时同步更新"
                placement="top"
              >
                <svg-icon
                  class-name="question_icon"
                  icon-class="question_svg"
                />
              </el-tooltip>
            </div>
          </div>
        </div>
        <div class="save_btns" v-if="globalDisabled">
          <div class="download_btn" @click="downloadPaper" v-if="teacherId==principalId">下载试卷</div>
          <div class="preview_btn" @click="previewPaper">预览</div>
          <div class="sure_btn" @click="closeWindow">关闭</div>
        </div>
      </div>
    </div>
    <!--  添加/编辑试题抽屉  -->
    <addTopicDrawer
      :index-id="nowIndexId"
      @submit="saveTopicByType"
      :open.sync="showTopicState"
      :topic-id="currentTopicId"
      :course-id="courseId"
      :open-type="openTopicType"
    ></addTopicDrawer>
    <!--  编辑抽题容器抽屉  -->
    <editContainerDrawer
      :exam-id="examId"
      :index-id="nowIndexId"
      :title="containerDrawerTitle"
      @refresh="updateContainerTable"
      :global-disabled="globalDisabled"
      :course-id="courseId"
      :open.sync="showContainerDrawer"
      :container-row="currentContainerRow"
    ></editContainerDrawer>
    <!--  编辑随机策略抽屉  -->
    <editTacticsDrawer
      @refresh="updateTacticsTable"
      :open.sync="showTacticsDrawer"
      :current-tactics-row="currentTacticsRow"
      :course-id="courseId"
    ></editTacticsDrawer>
    <!--  考核配分  -->
    <settingScoreDrawer
      :index-id="nowIndexId"
      :title="scoreDrawerTitle"
      :globalDisabled="globalDisabled"
      @refresh="refreshByScore"
      :open.sync="showSettingScoreState"
      :titleList="titleList"
      :paper-id="paperInfo.id"
      :courseIndexTree="courseIndexTree"
    ></settingScoreDrawer>
    <!--  题库  -->
    <topicBankDrawer
      :exam-id="examId"
      @sumitData="importTopicByBank"
      title="从题库导入"
      :open.sync="showTopicBankDrawer"
      :enterType="2"
      :course-id="courseId"
    ></topicBankDrawer>
    <!--  AI出题    -->
    <AIoutTopicDrawer
      :show.sync="showAiDrawer"
      @updateData="getPaperInfo"
      :title-id="currentTitleId"
      :open-type="showAiType"
      :index-id="nowIndexId"
      :course-id="courseId"
    ></AIoutTopicDrawer>
    <!--  编辑弹窗  -->
    <editDrawer title="题干详情" :show.sync="showDrawer" :openType="propOpenType" :propEditorValue="propEditorValue"></editDrawer>
    <!--  试卷下载弹窗  -->
    <DownloadPaper ref="downloadPaperRef"></DownloadPaper>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { mapGetters } from 'vuex'
import {
  updatePublishStateApi,
  getPaperByPaperIdApi,
  getCourseIndexTreesApi,
  addPaperTitleApi,
  editTitleApi,
  removeTitleApi,
  changeTitleSortApi,
  addContainerApi,
  addConnmonTopicApi,
  addConnmonTopicByBankApi,
  changeFixedTopicSortApi,
  editTopicApi,
  deleteConnmonTopicApi,
  removeContainerApi,
  updateTacticsNumApi,
  addTacticsApi,
  updateTacticsInfoApi,
  updateContainerNumApi,
  getContainerByIdApi,
  getTacticsByIdApi,
  removeTacticsApi,
  updateExamInfoApi,
  deleteBatchApi,
} from '../../api/ExaminationModule'
import { filterItemsByType } from '../tea_course/formatTreeData'
import { setUserGuideApi, getUserGuideApi } from '../../api/login'
import {getStudentEvaluateList} from '../../api/configuration/evaluationDimension'
import addTopicDrawer from './components/addTopicDrawer'
import editContainerDrawer from './components/editContainerDrawer'
import editTacticsDrawer from './components/editTacticsDrawer'
import settingScoreDrawer from './components/settingScoreDrawer'
import topicBankDrawer from './components/topicBankDrawer'
import AIoutTopicDrawer from './components/AIoutTopicDrawer'
import editDrawer from '../tea_course/components/editDrawer'
import ancestorsNameDeal from '../../components/ancestorsNameDeal'
import DownloadPaper from './components/downloadPaper.vue'
import { getExceptionExam } from '../../api/course/course'
import Sortable from 'sortablejs'
import { driver } from "driver.js";
import "driver.js/dist/driver.css";

export default {
  name: 'testPaperFormation',
  components: {
    addTopicDrawer,
    editContainerDrawer,
    editTacticsDrawer,
    topicBankDrawer,
    AIoutTopicDrawer,
    editDrawer,
    ancestorsNameDeal,
    settingScoreDrawer,
    DownloadPaper
  },
  dicts: ['topic_type'],
  data() {
    return {
      showErrorState: false,
      showErrorSign: true,
      // 分数权重
      scoreWeightTypes: ['1'],
      // 课程类型
      courseType: null,
      // 主讲教师
      principalId: null,
      //能力素养列表
      stuEvaluateList: [],
      //试题详情 && 表单参数
      paperInfo: {
        title: '',
        durationType: 2,
        submitType: 1,
        scoringMethod: 1,
        fixedPercent: undefined,
        duration: undefined,
        passingGrade: undefined,
        autoSettle: false,
        teacherScorePercent: undefined,
        selfScorePercent: undefined,
        leaderScorePercent: undefined,
        otherGroupScorePercent: undefined
      },
      // 初始试卷信息
      oldPaperInfo: {},
      formRules: {},
      // 考核表单校验
      rules1: {
        durationType: {
          required: true,
          validator: (rule, value, callback) => {
            if (value === 1 && !this.paperInfo.duration) {
              callback(
                new Error(`请输入${this.operationTypeText[this.examType]}时长`)
              )
            } else {
              callback()
            }
          },
          trigger: 'blur'
        },
        passingGrade: {
          required: true,
          validator: (rule, value, callback) => {
            if (!this.paperInfo.passingGrade) {
              callback(new Error(`请输入及格分数`));
            } else {
              if (this.paperInfo.passingGrade>this.totalScore){
                callback(new Error(`及格分数不能大于总分`));
              }else {
                callback();
              }
            }
          },
          trigger: "blur",
        },
        scoringMethod: {
          required: true,
          validator: (rule, value, callback) => {
            if (value == 2) {
              if (!this.paperInfo.fixedPercent) {
                callback(new Error('请输入漏选得分百分比'))
              } else {
                callback()
              }
            } else {
              callback()
            }
          },
          trigger: 'blur'
        },
        submitType: {
          required: true,
          validator: (rule, value, callback) => {
            if (!value) {
              callback(
                new Error(
                  `请选择${this.operationTypeText[this.examType]}提交人`
                )
              )
            } else {
              callback()
            }
          },
          trigger: 'blur'
        },
        scoreWeightTypes: {
          required: true,
          validator: (rule, value, callback) => {
            if (this.paperInfo.submitType == 1) {
              if (
                this.scoreWeightTypes.includes('1') &&
                !this.paperInfo.teacherScorePercent
              ) {
                callback(new Error('请输入教师评价权重'))
              } else if (
                this.scoreWeightTypes.includes('2') &&
                !this.paperInfo.selfScorePercent
              ) {
                callback(new Error('请输入学生评价权重'))
              } else if (
                this.scoreWeightTypes.includes('3') &&
                !this.paperInfo.leaderScorePercent
              ) {
                callback(new Error('请输入组长评价权重'))
              } else {
                let obj = {
                  1: this.paperInfo.teacherScorePercent,
                  2: this.paperInfo.selfScorePercent,
                  3: this.paperInfo.leaderScorePercent
                }
                let selectedPercent = this.scoreWeightTypes.reduce(
                  (sum, type) => sum + obj[type],
                  0
                )
                if (selectedPercent != 100) {
                  callback(new Error('权重之和必须为100'))
                } else {
                  callback()
                }
              }
            } else {
              if (
                this.scoreWeightTypes.includes('1') &&
                !this.paperInfo.teacherScorePercent
              ) {
                callback(new Error('请输入教师评价权重'))
              } else if (
                this.scoreWeightTypes.includes('2') &&
                !this.paperInfo.selfScorePercent
              ) {
                callback(new Error('请输入学生评价权重'))
              } else if (
                this.scoreWeightTypes.includes('3') &&
                !this.paperInfo.leaderScorePercent
              ) {
                callback(new Error('请输入组长评价权重'))
              } else if (
                this.scoreWeightTypes.includes('4') &&
                !this.paperInfo.otherGroupScorePercent
              ) {
                callback(new Error('请输入组间互评权重'))
              } else {
                let obj = {
                  1: this.paperInfo.teacherScorePercent,
                  2: this.paperInfo.selfScorePercent,
                  3: this.paperInfo.leaderScorePercent,
                  4: this.paperInfo.otherGroupScorePercent
                }
                let selectedPercent = this.scoreWeightTypes.reduce(
                  (sum, type) => sum + obj[type],
                  0
                )
                if (selectedPercent != 100) {
                  callback(new Error('权重之和必须为100'))
                } else {
                  callback()
                }
              }
            }
          },
          trigger: 'blur'
        }
      },
      //作业表单校验
      rules6: {
        durationType: {
          required: true,
          validator: (rule, value, callback) => {
            if (value === 1 && !this.paperInfo.duration) {
              callback(
                new Error(`请输入${this.operationTypeText[this.examType]}时长`)
              )
            } else {
              callback()
            }
          },
          trigger: 'blur'
        },
        scoringMethod: {
          required: true,
          validator: (rule, value, callback) => {
            if (value == 2) {
              if (!this.paperInfo.fixedPercent) {
                callback(new Error('请输入漏选得分百分比'))
              } else {
                callback()
              }
            } else {
              callback()
            }
          },
          trigger: 'blur'
        },
        submitType: {
          required: true,
          validator: (rule, value, callback) => {
            if (!value) {
              callback(
                new Error(
                  `请选择${this.operationTypeText[this.examType]}提交人`
                )
              )
            } else {
              callback()
            }
          },
          trigger: 'blur'
        },
        scoreWeightTypes: {
          required: true,
          validator: (rule, value, callback) => {
            if (this.paperInfo.submitType == 1) {
              if (
                this.scoreWeightTypes.includes('1') &&
                !this.paperInfo.teacherScorePercent
              ) {
                callback(new Error('请输入教师评价权重'))
              } else if (
                this.scoreWeightTypes.includes('2') &&
                !this.paperInfo.selfScorePercent
              ) {
                callback(new Error('请输入学生评价权重'))
              } else if (
                this.scoreWeightTypes.includes('3') &&
                !this.paperInfo.leaderScorePercent
              ) {
                callback(new Error('请输入组长评价权重'))
              } else {
                let obj = {
                  1: this.paperInfo.teacherScorePercent,
                  2: this.paperInfo.selfScorePercent,
                  3: this.paperInfo.leaderScorePercent
                }
                let selectedPercent = this.scoreWeightTypes.reduce(
                  (sum, type) => sum + obj[type],
                  0
                )
                if (selectedPercent != 100) {
                  callback(new Error('权重之和必须为100'))
                } else {
                  callback()
                }
              }
            } else {
              if (
                this.scoreWeightTypes.includes('1') &&
                !this.paperInfo.teacherScorePercent
              ) {
                callback(new Error('请输入教师评价权重'))
              } else if (
                this.scoreWeightTypes.includes('2') &&
                !this.paperInfo.selfScorePercent
              ) {
                callback(new Error('请输入学生评价权重'))
              } else if (
                this.scoreWeightTypes.includes('3') &&
                !this.paperInfo.leaderScorePercent
              ) {
                callback(new Error('请输入组长评价权重'))
              } else if (
                this.scoreWeightTypes.includes('4') &&
                !this.paperInfo.otherGroupScorePercent
              ) {
                callback(new Error('请输入组间互评权重'))
              } else {
                let obj = {
                  1: this.paperInfo.teacherScorePercent,
                  2: this.paperInfo.selfScorePercent,
                  3: this.paperInfo.leaderScorePercent,
                  4: this.paperInfo.otherGroupScorePercent
                }
                let selectedPercent = this.scoreWeightTypes.reduce(
                  (sum, type) => sum + obj[type],
                  0
                )
                if (selectedPercent != 100) {
                  callback(new Error('权重之和必须为100'))
                } else {
                  callback()
                }
              }
            }
          },
          trigger: 'blur'
        }
      },
      //练习表单校验
      rules3: {
        durationType: {
          required: true,
          validator: (rule, value, callback) => {
            if (value === 1 && !this.paperInfo.duration) {
              callback(
                new Error(`请输入${this.operationTypeText[this.examType]}时长`)
              )
            } else {
              callback()
            }
          },
          trigger: 'blur'
        }
      },
      // AI出题类型  0: "AI出题(联网出题)" 1: "AI出题(基于课程内容)",
      showAiType: 1,
      // AI出题抽屉状态
      showAiDrawer: false,
      // enterState: add|edit
      enterState: '',
      //题库抽屉状态
      showTopicBankDrawer: false,
      //是否是详情状态
      globalDisabled: false,
      showBigLoading: false,
      //编辑抽题容器抽屉Title
      containerDrawerTitle: '',
      //试卷类型
      examType: 1,
      //试卷类型文字键值对
      operationTypeText: {
        1: '考核',
        3: '练习',
        6: '作业'
      },
      stepIndex: 0,
      //设置分值抽屉状态
      showSettingScoreState: false,
      //设置分值抽屉title
      scoreDrawerTitle: '',
      //批量删除状态
      multiDelete: false,
      //当前知识点id
      nowIndexId: '',
      //全选状态
      allMultiDelete: false,
      bigTitleNum: 0,
      smallTitleNum: 0,
      totalScore: 0,
      //编辑抽题容器布尔值
      showContainerDrawer: false,
      //当前抽题容器整行数据
      currentContainerRow: {},
      //编辑随机策略布尔值
      showTacticsDrawer: false,
      //当前随机策略整行数据
      currentTacticsRow: {},

      //新增试题弹框布尔值
      showTopicState: false,
      //新增试题弹框类型
      openTopicType: '',
      //当前大题id
      currentTitleId: '',
      //当前题目id
      currentTopicId: '',
      //保存到哪个大题模式的类型 fixed：固定 selection：抽题 random：随机
      saveTopicType: '',
      //课程id
      courseId: '',
      //试卷id
      examId: null,
      //表头样式
      tableHeaderStyle: {
        'background-color': '#f8f8f9',
        color: '#333333',
        'font-size': '14px',
        'font-family': 'PingFangSC, PingFang SC',
        'font-weight': '400'
      },
      //环形图
      myChart: null,
      //试卷Loading状态
      showPaperLoading: false,
      //学校信息
      schoolInfo: null,
      btnList: [
        {
          name: '固定大题',
          icon: 'add',
          type: 1
        },
        {
          name: '抽题大题',
          icon: 'add',
          type: 2
        },
        {
          name: '随机大题',
          icon: 'add',
          type: 3
        }
      ],
      chartType: 1,
      //试题列表
      titleList: [],
      //临时试题列表
      oldTitleList: [],
      //知识点列表
      courseIndexTree: [],
      // 试题详情
      topicLabelList: [],
      //题型数据统计列表
      toplicTypeData: [
        { value: 0, name: '单选题', type: 0 },
        { value: 0, name: '多选题', type: 1 },
        { value: 0, name: '判断题', type: 2 },
        { value: 0, name: '填空题', type: 3 },
        { value: 0, name: '简答题', type: 4 },
        { value: 0, name: '操作题', type: 5 }
      ],
      difficultyData: [
        { value: 0, name: '困难' },
        { value: 0, name: '中等' },
        { value: 0, name: '简单' },
        { value: 0, name: '不限难度' }
      ],
      second: 3,
      closeTimer: null,
      secondTimer: null,
      //富文本录入类型 1：添加 2：编辑 3：查看
      propOpenType: 1,
      //富文本录入抽屉状态
      showDrawer: false,
      //富文本录入组件---内容
      propEditorValue: '',
      autoSettleDisable: false,
      hasPublish: true,
      userGuideValue: {}
    }
  },
  computed: {
    ...mapGetters(['name', 'avatar','teacherId'])
  },
  watch: {
    titleList: {
      handler(newVal) {
        let oldData = JSON.stringify(this.oldTitleList)
        let newData = JSON.stringify(newVal)
        if (newData != oldData && this.hasPublish) {
          this.hasPublish = false
          this.updatePublishState()
        }
        this.initData(newVal)
      },
      deep: true
    },
    allMultiDelete: {
      handler(newVal) {
        if (newVal) {
          this.titleList.forEach((item) => {
            this.$refs[`topicTable${item.id}Ref`][0].toggleAllSelection()
          })
        } else {
          this.titleList.forEach((item) => {
            this.$refs[`topicTable${item.id}Ref`][0].clearSelection()
          })
        }
      }
    },
    scoreWeightTypes: {
      handler(value) {
        if (!value.includes('1')) {
          this.paperInfo.teacherScorePercent = undefined
        }
        if (!value.includes('2')) {
          this.paperInfo.selfScorePercent = undefined
        }
        if (!value.includes('3')) {
          this.paperInfo.leaderScorePercent = undefined
        }
        if (!value.includes('4')) {
          this.paperInfo.otherGroupScorePercent = undefined
        }
      },
      deep: true
    }
  },
  created() {
    this.schoolInfo = this.$store.getters.schoolInfo
    this.courseType = this.$route.query.courseType
    this.principalId = this.$route.query.principalId
    this.examId = this.$route.query.paperId - 0
    this.courseId = this.$route.query.courseId - 0
    this.nowIndexId = this.$route.query.indexId - 0
    // formatType:1.考核 6.作业 3.练习
    this.examType = this.$route.query.formatType - 0
    this.enterState = this.$route.query.enterState
    if (this.enterState == 'detail') {
      this.globalDisabled = true
    }
    if (this.examType == 1) {
      this.formRules = this.rules1
    }
    if (this.examType == 3) {
      this.formRules = this.rules3
    }
    if (this.examType == 6) {
      this.formRules = this.rules6
    }
    this.getPaperInfo('first')
    this.getExceptionExam()
    this.getCourseIndexTrees(this.courseId)
  },
  mounted() {
    this.getUserGuide()
  },
  beforeDestroy() {
    clearTimeout(this.closeTimer)
    clearInterval(this.secondTimer)
  },
  methods: {
    async getUserGuide() {
      try {
        let res = await getUserGuideApi()
        const { code, msg } = res
        if (code == 200) {
          this.userGuideValue = msg ? JSON.parse(msg) : {}
          if (
            !this.userGuideValue.paper_driver &&
            this.enterState != 'detail'
          ) {
            this.driveAction()
          }
        }
      } catch (e) {
        console.error(e)
      }
    },
    async setUserGuide() {
      try {
        this.userGuideValue.paper_driver = true
        let params = {
          value: JSON.stringify(this.userGuideValue)
        }
        let res = await setUserGuideApi(params)
        const { code } = res
        if (code == 200) {
          console.log('设置成功')
        }
      } catch (e) {
        console.error(e)
      }
    },
    driveAction() {
      const driverObj = driver({
        nextBtnText: '下一步',
        prevBtnText: '上一步',
        doneBtnText: '完成',
        overlayColor: '#000000',
        allowClose: false,
        popoverClass: 'custom_popover',
        disableActiveInteraction: true,
        onNextClick: (e) => {
          let nextStepRef = this.$refs.nextStepRef
          let editBtnsRef = this.$refs.editBtnsRef
          if (e == nextStepRef) {
            this.stepIndex = 1
            driverObj.moveNext()
          } else if (e == editBtnsRef) {
            this.stepIndex = 0
            driverObj.moveNext()
            this.setUserGuide()
          } else {
            driverObj.moveNext()
          }
        },
        onPrevClick: (e) => {
          let editBtnsRef = this.$refs.editBtnsRef
          if (e == editBtnsRef) {
            this.stepIndex = 0
            driverObj.movePrevious()
          } else {
            driverObj.movePrevious()
          }
        },
        showButtons: ['next', 'previous'],
        steps: [
          {
            element: '.top_botton',
            popover: {
              title: '',
              description: '先点击页面左上角选择要添加的大题类型'
            }
          },
          {
            element: '.score_btn',
            popover: {
              title: '',
              description: '试卷编辑完成后，点击右上角进行试卷配分'
            }
          },
          {
            element: '.sure_btn',
            popover: {
              title: '',
              description:
                '配分完成后，点击下一步进行试卷配置;注：试卷配置完成后并“更新试卷“方可生效'
            }
          },
          {
            element: '.edit_btns',
            popover: {
              title: '',
              description:
                '编辑完成配置信息后选择保存类型;仅保存：不会同步至正式课;更新试卷：更新课程草稿箱中的试卷，待课程更新时同步更新;注:课程更新时根据最后一次操作判断考核是否更新'
            }
          }
        ]
      })
      driverObj.drive()
    },
    previewPaper() {
      const routeData = this.$router.resolve({
        path: '/actionpreviewPaper', // 或使用 name: 'route-name'
        query: {
          type: this.examType,
          id: this.paperInfo.id
        }
      })
      window.open(routeData.href, '_blank')
    },
    //使el-table可以拖拽排序
    openDrag() {
      this.titleList.forEach((item, tableIndex) => {
        let key = `topicTable${item.id}Ref`
        const tbody = this.$refs[key][0].$el.querySelector(
          '.el-table__body-wrapper tbody'
        )
        if (!tbody) return
        // 避免重复初始化
        if (tbody._sortable) return
        const sortable = Sortable.create(tbody, {
          handle: '.moved',
          disabled: false,
          ghostClass: 'sortable-ghost',
          animation: 150,
          onEnd: (e) => {
            const oldIndex = e.oldIndex
            const newIndex = e.newIndex
            if (this.titleList[tableIndex].type == 1) {
              let tableData = this.titleList[tableIndex].topicList
              const movedItem = tableData.splice(oldIndex, 1)[0]
              tableData.splice(newIndex, 0, movedItem)
              this.titleList[tableIndex].topicList = []
              this.$nextTick(() => {
                this.titleList[tableIndex].topicList = tableData
                this.changeFixedTopicSort(tableData)
              })
            }
            if (this.titleList[tableIndex].type == 2) {
              let tableData = this.titleList[tableIndex].containerList
              const movedItem = tableData.splice(oldIndex, 1)[0]
              tableData.splice(newIndex, 0, movedItem)
              this.titleList[tableIndex].containerList = []
              this.$nextTick(() => {
                this.titleList[tableIndex].containerList = tableData
              })
            }
            if (this.titleList[tableIndex].type == 3) {
              let tableData = this.titleList[tableIndex].tacticsList
              const movedItem = tableData.splice(oldIndex, 1)[0]
              tableData.splice(newIndex, 0, movedItem)
              this.titleList[tableIndex].tacticsList = []
              this.$nextTick(() => {
                this.titleList[tableIndex].tacticsList = tableData
              })
            }
          }
        })
        // 保存实例引用，防止重复创建
        tbody._sortable = sortable
      })
    },
    async changeFixedTopicSort(data) {
      let ids = data.map((item) => item.paperTopicId)
      try {
        let res = await changeFixedTopicSortApi(ids.join(','))
        const { code } = res
        if (code == 200) {
          console.log('更新固定大题排序成功')
        }
      } catch (e) {
        console.error(e)
      }
    },
    async refreshByScore() {
      await this.getPaperInfo()
      this.getExceptionExam();
    },
    setStatusMessages() {
      localStorage.setItem(
        `refresh_paper_status_messages`,
        new Date().getTime()
      )
    },
    //更新试卷发布状态
    async updatePublishState() {
      try {
        let params = {
          publish: false
        }
        let res = await updatePublishStateApi(this.paperInfo.id, params)
        const { code } = res
        if (code == 200) {
          console.log('更新试卷发布状态成功')
          //设置本地缓存以用于跨标签页通信
          this.setStatusMessages()
        }
      } catch (e) {
        console.error(e)
      }
    },
    //获取课程下有哪些目录存在异常考核
    async getExceptionExam() {
      try {
        let res = await getExceptionExam(this.courseId)
        const { code, data } = res
        if (code == 200) {
          let arr = filterItemsByType(data)
          this.showErrorState = false
          let keyMap = {
            1: 'hasExamException',
            3: 'hasPracticeException',
            6: 'hasHomeworkException'
          }
          for (const arrElement of arr) {
            if (
              arrElement.id == this.nowIndexId &&
              arrElement.exceptionIndexVO[keyMap[this.examType]]
            ) {
              this.showErrorState = true
              return
            }
          }
        }
      } catch (e) {
        console.error(e)
      }
    },
    //富文本录入
    getByEditor(type, Value) {
      if (type == 3 && !this.$isIncludesHtml(Value)) {
        return
      }
      this.propEditorValue = Value
      this.propOpenType = type
      this.showDrawer = true
    },
    showAiTopic(type, item) {
      this.currentTitleId = item.id
      this.showAiType = type
      this.showAiDrawer = true
    },
    async importTopicByBank(e) {
      let topicIds = e.join(',')
      const loading = this.$loading({
        lock: true,
        text: '正在处理...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      try {
        let res = await addConnmonTopicByBankApi(this.currentTitleId, topicIds)
        const { code } = res
        if (code == 200) {
          this.$modal.msgSuccess('导入成功')
          this.getPaperInfo()
        }
      } catch (e) {
        console.error(e)
      } finally {
        loading.close()
      }
    },
    //显示题库
    showTopicBank(item) {
      this.currentTitleId = item.id
      this.showTopicBankDrawer = true
    },
    //下一步详情
    async nextInfo() {
      this.stepIndex = 1
      //工学一体课程  才有能力素养
      if (this.courseType == 3) {
        this.getEvaluateInfo()
      }
    },
    //关闭窗口
    closeWindow() {
      window.close()
    },
    //保存表单
    saveTopicForm(publish) {
      this.$refs.formRef.validate(async(valid) => {
        if (valid) {
          let params = {
            ...this.paperInfo,
            teacherScorePercent: this.paperInfo.teacherScorePercent
              ? this.paperInfo.teacherScorePercent
              : 0,
            leaderScorePercent: this.paperInfo.leaderScorePercent
              ? this.paperInfo.leaderScorePercent
              : 0,
            selfScorePercent: this.paperInfo.selfScorePercent
              ? this.paperInfo.selfScorePercent
              : 0,
            otherGroupScorePercent: this.paperInfo.otherGroupScorePercent
              ? this.paperInfo.otherGroupScorePercent
              : 0,
            publish: publish,
            totalScore: this.totalScore
          }
          if (this.paperInfo.durationType == 2) {
            params.duration = -1
          }
          if (this.courseType == 3) {
            let arr = []
            for (const stuEvaluate of this.stuEvaluateList) {
              if (stuEvaluate.paramList && stuEvaluate.paramList.length > 0) {
                for (const stuEvaluateElement of stuEvaluate.paramList) {
                  if (stuEvaluateElement.checked) {
                    arr.push(stuEvaluateElement.id)
                  }
                }
              }
            }
            params.evaluateParamIds = arr.join(',')
          }
          this.submitForm(params, publish)
        } else {
          this.$message.warning('请按规范填写标红文本框内容')
        }
      })
    },
    //提交表单
    submitForm(params, publish) {
      if (!publish) {
        this.$confirm(
          `保存${
            this.operationTypeText[this.examType]
          }编辑内容，课程更新时，不会更新本${
            this.operationTypeText[this.examType]
          }内容，是否确认仅保存？如需与课程同步更新，请选择更新${
            this.operationTypeText[this.examType]
          }？`,
          '仅保存确认',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
          .then(async() => {
            const loading = this.$loading({
              lock: true,
              text: '正在保存...',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.3)'
            })
            try {
              let res = await updateExamInfoApi(params)
              const { code } = res
              if (code == 200) {
                this.$modal.msgSuccess('保存成功')
                this.hasPublish = false
                this.setStatusMessages()
              }
            } catch (e) {
              console.error(e)
            } finally {
              loading.close()
            }
          })
          .catch(() => {
            this.$modal.msgInfo('已取消')
          })
      } else {
        this.$confirm(
          `更新后，当前${
            this.operationTypeText[this.examType]
          }将覆盖草稿箱课程的原${
            this.operationTypeText[this.examType]
          }，课程同步至正式课时，${
            this.operationTypeText[this.examType]
          }同步更新至正式课程中`,
          `更新${this.operationTypeText[this.examType]}确认`,
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
          .then(async() => {
            const loading = this.$loading({
              lock: true,
              text: '正在更新...',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.3)'
            })
            try {
              let res = await updateExamInfoApi(params)
              const { code } = res
              if (code == 200) {
                this.hasPublish = true
                this.setStatusMessages()
                //3秒倒计时后关闭当前窗口
                this.closeTimer = setTimeout(() => {
                  window.close()
                }, 3000)
                this.$message({
                  customClass: 'blue_message',
                  duration: 10000000,
                  dangerouslyUseHTMLString: true,
                  type: 'success',
                  message: `<div>${
                    this.operationTypeText[this.examType]
                  }更新成功
                          <span id="countdown" style="color: #FF4D4F">${
                    this.second
                  }s</span> 后自动关闭当前页面
                          <span id="cancelClose" class="pointer close_btn_message">重新编辑</span></div>`
                })
                // 每秒更新倒计时
                this.secondTimer = setInterval(() => {
                  this.second--
                  const countdownEl = document.getElementById('countdown')
                  if (countdownEl) countdownEl.textContent = `${this.second}s`
                }, 1000)
                // 使用 nextTick 确保 DOM 已更新
                this.$nextTick(() => {
                  const cancelBtn = document.getElementById('cancelClose')
                  if (cancelBtn) {
                    cancelBtn.addEventListener('click', () => {
                      clearTimeout(this.closeTimer)
                      clearInterval(this.secondTimer)
                      this.second = 3
                      this.$message.closeAll() // 关闭消息提示
                    })
                  }
                })
              }
            } catch (e) {
              console.error(e)
            } finally {
              loading.close()
            }
          })
          .catch(() => {
            this.$modal.msgInfo('已取消')
          })
      }
    },
    changeSubmitType() {
      this.$refs.formRef.clearValidate('scoreWeightTypes')
      this.paperInfo.teacherScorePercent = undefined
      this.paperInfo.selfScorePercent = undefined
      this.paperInfo.leaderScorePercent = undefined
      this.paperInfo.otherGroupScorePercent = undefined
      this.scoreWeightTypes = ['1']
    },
    //上一步
    prevStep() {
      this.$refs.formRef.clearValidate()
      this.stepIndex = 0
    },
    async getEvaluateInfo() {
      try {
        let res = await getStudentEvaluateList()
        const { code, data } = res
        if (code == 200) {
          data.forEach((value) => {
            if (value.paramList && value.paramList.length > 0) {
              value.paramList.forEach((value) => {
                value.checked = false
              })
            }
          })
          if (this.paperInfo.evaluateParamIds) {
            for (const stuEvaluateListElement of data) {
              if (
                stuEvaluateListElement.paramList &&
                stuEvaluateListElement.paramList.length > 0
              ) {
                for (const paramItem of stuEvaluateListElement.paramList) {
                  if (this.paperInfo.evaluateParamIds.includes(paramItem.id)) {
                    paramItem.checked = true
                  }
                }
              }
            }
          }
          this.stuEvaluateList = data
        }
      } catch (e) {
        console.error(e)
      }
    },
    //配分
    showSettingScore() {
      let data = this.checkSettingScore()
      if (!data.hasPassed) {
        this.$modal.msgWarning(data.warnText)
        this.scrollToAnchor(data.scrollId)
        return
      }
      this.showSettingScoreState = true
      if (this.globalDisabled) {
        this.scoreDrawerTitle = `${
          this.operationTypeText[this.examType]
        }配分详情`
      } else {
        this.scoreDrawerTitle = `${this.operationTypeText[this.examType]}配分`
      }
    },
    //全选中
    handleSelectionSelect(e, item) {
      let ids = []
      if (item.type == 1) {
        e.forEach((value) => {
          ids.push({ id: value.paperTopicId })
        })
      } else {
        e.forEach((value) => {
          ids.push({ id: value.id })
        })
      }
      item.delTopics = ids
    },
    //确认批量删除
    async sureMultiDelete() {
      let params = []
      for (const argument of this.titleList) {
        if (argument.delTopics && argument.delTopics.length > 0) {
          params.push({
            titleId: argument.id,
            type: argument.type,
            topics: argument.delTopics
          })
        }
      }
      if (params.length == 0) {
        this.$modal.msgWarning('请选择要批量删除的题目')
        return
      }
      this.$confirm('确定批量删除吗？', '批量删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const loading = this.$loading({
            lock: true,
            text: '正在处理...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          try {
            let res = await deleteBatchApi(this.paperInfo.id, params)
            if (res.code == 200) {
              this.$modal.msgSuccess('批量删除成功')
              this.getPaperInfo()
              this.multiDelete = false
              this.allMultiDelete = false
            }
          } catch (e) {
            console.error(e)
          } finally {
            loading.close()
          }
        })
        .catch(() => {
          this.$modal.msgInfo('已取消')
        })
    },
    //取消批量删除
    closeMultiDelete() {
      this.titleList.forEach((item) => {
        this.$refs[`topicTable${item.id}Ref`][0].clearSelection()
      })
      this.multiDelete = false
      this.allMultiDelete = false
    },
    //显示批量删除
    showSmallTpoicDellete() {
      this.multiDelete = true
    },
    //处理/统计数据
    initData(newVal) {
      let arr = []
      let bigTitleNum = 0
      let smallTitleNum = 0
      let totalScore = 0
      let toplicTypeData = [
        { value: 0, name: '单选题', type: 0 },
        { value: 0, name: '多选题', type: 1 },
        { value: 0, name: '判断题', type: 2 },
        { value: 0, name: '填空题', type: 3 },
        { value: 0, name: '简答题', type: 4 },
        { value: 0, name: '操作题', type: 5 }
      ]
      let difficultyData = [
        { value: 0, name: '简单', type: 0 },
        { value: 0, name: '中等', type: 1 },
        { value: 0, name: '困难', type: 2 },
        { value: 0, name: '不限难度', type: 3 }
      ]
      newVal.forEach((item) => {
        bigTitleNum++
        let obj = {
          bigTitleId: item.id,
          bigTitle: item.title,
          topicList: []
        }
        if (item.type == 1) {
          item.topicList.forEach((topicItem) => {
            toplicTypeData.forEach((typeItem) => {
              if (topicItem.topicType == typeItem.type) {
                typeItem.value++
              }
            })
            difficultyData.forEach((difficultyItem) => {
              if (topicItem.difficulty == difficultyItem.type) {
                difficultyItem.value++
              }
            })
            smallTitleNum++
            totalScore += topicItem.score
            let topicObj = {
              topicId: `fixed-${topicItem.id}`
            }
            obj.topicList.push(topicObj)
          })
        }
        if (item.type == 2) {
          item.containerList.forEach((topicItem) => {
            if (topicItem.extractNum > 0) {
              for (let i = 0; i < topicItem.extractNum; i++) {
                smallTitleNum++
                totalScore += topicItem.score
                let containerObj = {
                  topicId: `container-${topicItem.id}`
                }
                obj.topicList.push(containerObj)
              }
            }
          })
        }
        if (item.type == 3) {
          item.tacticsList.forEach((topicItem) => {
            if (topicItem.extractNum > 0) {
              for (let i = 0; i < topicItem.extractNum; i++) {
                smallTitleNum++
                totalScore += topicItem.score
                let containerObj = {
                  topicId: `tactics-${topicItem.id}`
                }
                obj.topicList.push(containerObj)
              }
            }
          })
        }
        arr.push(obj)
      })
      this.bigTitleNum = bigTitleNum
      this.smallTitleNum = smallTitleNum
      this.totalScore = totalScore.toFixed(1) - 0
      this.toplicTypeData = toplicTypeData
      this.difficultyData = difficultyData
      this.topicLabelList = arr
      this.$nextTick(() => {
        this.changeTabs(this.chartType)
      })
    },
    //校验试卷题目数量
    checkSettingScore() {
      let hasPassed = true
      let scrollId = ''
      let warnText = ''
      if (this.titleList.length == 0) {
        hasPassed = false
        warnText = `没有添加${
          this.operationTypeText[this.examType]
        }大题，请先添加${this.operationTypeText[this.examType]}大题`
        return { hasPassed, warnText, scrollId }
      }
      for (const item of this.titleList) {
        if (item.type == 1) {
          /**
           * 固定大题类型校验：
           * & 固定大题题目数量校验
           * */
          item.showErrorClass = item.topicList.length == 0
          /* 固定大题题目数量校验 */
          if (item.topicList.length == 0) {
            hasPassed = false
            warnText = `【固定大题类型】【${item.title}】没有试题，请先添加试题`
            scrollId = item.id
            return { hasPassed, warnText, scrollId }
          }
        }
        /**
         * 抽题大题类型校验：
         * & 抽题容器数量校验
         * & 抽题总数校验
         * & 难易程度抽题数校验
         * */
        if (item.type == 2) {
          item.showErrorClass = item.containerList.length == 0
          /** 抽题容器数量校验 **/
          if (item.containerList.length == 0) {
            hasPassed = false
            warnText = `【抽题大题类型】【${item.title}】没有抽题容器，请先添加抽题容器`
            scrollId = item.id
            return { hasPassed, warnText, scrollId }
          }
          for (const [topicIndex, topicItem] of item.containerList.entries()) {
            /** 抽题总数校验 **/
            if (topicItem.extractNum == 0) {
              hasPassed = false
              warnText = `【抽题大题类型】【${item.title}】【第${
                topicIndex + 1
              }个抽题容器】难易程度抽题数为0，请设置难易程度抽题数`
              scrollId = `container-${topicItem.id}`
              return { hasPassed, warnText, scrollId }
            }
            /** 不限难度抽题数量校验 **/
            if (topicItem.unlimitedNum > topicItem.optionalUnlimitedNum) {
              hasPassed = false
              scrollId = `container-${topicItem.id}`
              warnText = `【抽题大题类型】【${item.title}】【第${
                topicIndex + 1
              }个抽题容器】【不限难度】抽题数大于题目总数量，请重新设置`
              return { hasPassed, warnText, scrollId }
            }
            /** 容易难度抽题数量校验 **/
            if (topicItem.easyNum > topicItem.optionalEasyNum) {
              hasPassed = false
              scrollId = `container-${topicItem.id}`
              warnText = `【抽题大题类型】【${item.title}】【第${
                topicIndex + 1
              }个抽题容器】【简单】抽题数大于题目总数量，请重新设置`
              return { hasPassed, warnText, scrollId }
            }
            /** 中等难度抽题数量校验 **/
            if (topicItem.normalNum > topicItem.optionalNormalNum) {
              hasPassed = false
              scrollId = `container-${topicItem.id}`
              warnText = `【抽题大题类型】【${item.title}】【第${
                topicIndex + 1
              }个抽题容器】【中等】抽题数大于题目总数量，请重新设置`
              return { hasPassed, warnText, scrollId }
            }
            /** 困难难度抽题数量校验 **/
            if (topicItem.hardNum > topicItem.optionalHardNum) {
              hasPassed = false
              scrollId = `container-${topicItem.id}`
              warnText = `【抽题大题类型】【${item.title}】【第${
                topicIndex + 1
              }个抽题容器】【困难】抽题数大于题目总数量，请重新设置`
              return { hasPassed, warnText, scrollId }
            }
          }
        }
        /**
         * 随机大题类型校验：
         * & 随机策略数量校验
         * & 抽题总数校验
         * & 难易程度抽题数校验
         * & 分数校验
         * */
        if (item.type == 3) {
          item.showErrorClass = item.tacticsList.length == 0
          /** 随机策略数量校验 **/
          if (item.tacticsList.length == 0) {
            hasPassed = false
            warnText = `【随机大题类型】【${item.title}】没有随机策略，请先添加随机策略`
            scrollId = item.id
            return { hasPassed, warnText, scrollId }
          }
          for (const [topicIndex, topicItem] of item.tacticsList.entries()) {
            /** 抽题总数校验 **/
            if (topicItem.extractNum == 0) {
              hasPassed = false
              warnText = `【随机大题类型】【${item.title}】【第${
                topicIndex + 1
              }个随机策略】难易程度抽题数为0，请设置难易程度抽题数`
              scrollId = `tactics-${topicItem.id}`
              return { hasPassed, warnText, scrollId }
            }
            /** 不限难度抽题数量校验 **/
            if (topicItem.unlimitedNum > topicItem.optionalUnlimitedNum) {
              hasPassed = false
              scrollId = `tactics-${topicItem.id}`
              warnText = `【随机大题类型】【${item.title}】【第${
                topicIndex + 1
              }个随机策略】【不限难度】抽题数大于题目总数量，请重新设置`
              return { hasPassed, warnText, scrollId }
            }
            /** 容易难度抽题数量校验 **/
            if (topicItem.easyNum > topicItem.optionalEasyNum) {
              hasPassed = false
              scrollId = `tactics-${topicItem.id}`
              warnText = `【随机大题类型】【${item.title}】【第${
                topicIndex + 1
              }个随机策略】【简单】抽题数大于题目总数量，请重新设置`
              return { hasPassed, warnText, scrollId }
            }
            /** 中等难度抽题数量校验 **/
            if (topicItem.normalNum > topicItem.optionalNormalNum) {
              hasPassed = false
              scrollId = `tactics-${topicItem.id}`
              warnText = `【随机大题类型】【${item.title}】【第${
                topicIndex + 1
              }个随机策略】【中等】抽题数大于题目总数量，请重新设置`
              return { hasPassed, warnText, scrollId }
            }
            /** 困难难度抽题数量校验 **/
            if (topicItem.hardNum > topicItem.optionalHardNum) {
              hasPassed = false
              scrollId = `tactics-${topicItem.id}`
              warnText = `【随机大题类型】【${item.title}】【第${
                topicIndex + 1
              }个随机策略】【困难】抽题数大于题目总数量，请重新设置`
              return { hasPassed, warnText, scrollId }
            }
          }
        }
      }
      return { hasPassed, warnText, scrollId }
    },
    //校验试卷配分
    checkScore() {
      let hasPassed = true
      let scrollId = ''
      let warnText = ''
      if (this.titleList.length == 0) {
        hasPassed = false
        warnText = `没有添加${
          this.operationTypeText[this.examType]
        }大题，请先添加${this.operationTypeText[this.examType]}大题`
        return { hasPassed, warnText, scrollId }
      }
      for (const item of this.titleList) {
        if (item.type == 1) {
          /**
           * 固定大题类型校验：
           * & 固定大题题目数量校验
           * & 分数校验
           * */
          item.showErrorClass = item.topicList.length == 0
          /* 固定大题题目数量校验 */
          if (item.topicList.length == 0) {
            hasPassed = false
            warnText = `【固定大题类型】【${item.title}】没有试题，请先添加试题`
            scrollId = item.id
            return { hasPassed, warnText, scrollId }
          }
          for (const [topicIndex, topicItem] of item.topicList.entries()) {
            /* 分数校验 */
            if (!topicItem.score) {
              hasPassed = false
              scrollId = `fixed-${topicItem.id}`
              warnText = `【固定大题类型】【${item.title}】【第${
                topicIndex + 1
              }题】没有设置试题分值，请点击右上角【${
                this.operationTypeText[this.examType]
              }配分】按钮进行配分`
              return { hasPassed, warnText, scrollId }
            }
          }
        }
        /**
         * 抽题大题类型校验：
         * & 抽题容器数量校验
         * & 抽题总数校验
         * & 难易程度抽题数校验
         * & 分数校验
         * */
        if (item.type == 2) {
          item.showErrorClass = item.containerList.length == 0
          /** 抽题容器数量校验 **/
          if (item.containerList.length == 0) {
            hasPassed = false
            warnText = `【抽题大题类型】【${item.title}】没有抽题容器，请先添加抽题容器`
            scrollId = item.id
            return { hasPassed, warnText, scrollId }
          }
          for (const [topicIndex, topicItem] of item.containerList.entries()) {
            /** 抽题总数校验 **/
            if (topicItem.extractNum == 0) {
              hasPassed = false
              warnText = `【抽题大题类型】【${item.title}】【第${
                topicIndex + 1
              }个抽题容器】难易程度抽题数为0，请设置难易程度抽题数`
              scrollId = `container-${topicItem.id}`
              return { hasPassed, warnText, scrollId }
            }
            /** 不限难度抽题数量校验 **/
            if (topicItem.unlimitedNum > topicItem.optionalUnlimitedNum) {
              hasPassed = false
              scrollId = `container-${topicItem.id}`
              warnText = `【抽题大题类型】【${item.title}】【第${
                topicIndex + 1
              }个抽题容器】【不限难度】抽题数大于题目总数量，请重新设置`
              return { hasPassed, warnText, scrollId }
            }
            /** 容易难度抽题数量校验 **/
            if (topicItem.easyNum > topicItem.optionalEasyNum) {
              hasPassed = false
              scrollId = `container-${topicItem.id}`
              warnText = `【抽题大题类型】【${item.title}】【第${
                topicIndex + 1
              }个抽题容器】【简单】抽题数大于题目总数量，请重新设置`
              return { hasPassed, warnText, scrollId }
            }
            /** 中等难度抽题数量校验 **/
            if (topicItem.normalNum > topicItem.optionalNormalNum) {
              hasPassed = false
              scrollId = `container-${topicItem.id}`
              warnText = `【抽题大题类型】【${item.title}】【第${
                topicIndex + 1
              }个抽题容器】【中等】抽题数大于题目总数量，请重新设置`
              return { hasPassed, warnText, scrollId }
            }
            /** 困难难度抽题数量校验 **/
            if (topicItem.hardNum > topicItem.optionalHardNum) {
              hasPassed = false
              scrollId = `container-${topicItem.id}`
              warnText = `【抽题大题类型】【${item.title}】【第${
                topicIndex + 1
              }个抽题容器】【困难】抽题数大于题目总数量，请重新设置`
              return { hasPassed, warnText, scrollId }
            }
            /** 分数校验 **/
            if (!topicItem.score) {
              hasPassed = false
              scrollId = `container-${topicItem.id}`
              warnText = `【抽题大题类型】【${item.title}】【第${
                topicIndex + 1
              }个抽题容器】没有设置每题分值，请点击右上角【${
                this.operationTypeText[this.examType]
              }配分】按钮进行配分`
              return { hasPassed, warnText, scrollId }
            }
          }
        }
        /**
         * 随机大题类型校验：
         * & 随机策略数量校验
         * & 抽题总数校验
         * & 难易程度抽题数校验
         * & 分数校验
         * */
        if (item.type == 3) {
          item.showErrorClass = item.tacticsList.length == 0
          /** 随机策略数量校验 **/
          if (item.tacticsList.length == 0) {
            hasPassed = false
            warnText = `【随机大题类型】【${item.title}】没有随机策略，请先添加随机策略`
            scrollId = item.id
            return { hasPassed, warnText, scrollId }
          }
          for (const [topicIndex, topicItem] of item.tacticsList.entries()) {
            /** 抽题总数校验 **/
            if (topicItem.extractNum == 0) {
              hasPassed = false
              warnText = `【随机大题类型】【${item.title}】【第${
                topicIndex + 1
              }个随机策略】难易程度抽题数为0，请设置难易程度抽题数`
              scrollId = `tactics-${topicItem.id}`
              return { hasPassed, warnText, scrollId }
            }
            /** 不限难度抽题数量校验 **/
            if (topicItem.unlimitedNum > topicItem.optionalUnlimitedNum) {
              hasPassed = false
              scrollId = `tactics-${topicItem.id}`
              warnText = `【随机大题类型】【${item.title}】【第${
                topicIndex + 1
              }个随机策略】【不限难度】抽题数大于题目总数量，请重新设置`
              return { hasPassed, warnText, scrollId }
            }
            /** 容易难度抽题数量校验 **/
            if (topicItem.easyNum > topicItem.optionalEasyNum) {
              hasPassed = false
              scrollId = `tactics-${topicItem.id}`
              warnText = `【随机大题类型】【${item.title}】【第${
                topicIndex + 1
              }个随机策略】【简单】抽题数大于题目总数量，请重新设置`
              return { hasPassed, warnText, scrollId }
            }
            /** 中等难度抽题数量校验 **/
            if (topicItem.normalNum > topicItem.optionalNormalNum) {
              hasPassed = false
              scrollId = `tactics-${topicItem.id}`
              warnText = `【随机大题类型】【${item.title}】【第${
                topicIndex + 1
              }个随机策略】【中等】抽题数大于题目总数量，请重新设置`
              return { hasPassed, warnText, scrollId }
            }
            /** 困难难度抽题数量校验 **/
            if (topicItem.hardNum > topicItem.optionalHardNum) {
              hasPassed = false
              scrollId = `tactics-${topicItem.id}`
              warnText = `【随机大题类型】【${item.title}】【第${
                topicIndex + 1
              }个随机策略】【困难】抽题数大于题目总数量，请重新设置`
              return { hasPassed, warnText, scrollId }
            }
            /** 分数校验 **/
            if (!topicItem.score) {
              hasPassed = false
              scrollId = `tactics-${topicItem.id}`
              warnText = `【随机大题类型】【${item.title}】【第${
                topicIndex + 1
              }个随机策略】没有设置每题分值，请点击右上角【${
                this.operationTypeText[this.examType]
              }配分】按钮进行配分`
              return { hasPassed, warnText, scrollId }
            }
          }
        }
      }
      return { hasPassed, warnText, scrollId }
    },
    //下一步
    nextStep() {
      let data = this.checkScore()
      if (!data.hasPassed) {
        this.$modal.msgWarning(data.warnText)
        this.scrollToAnchor(data.scrollId)
        return
      }
      if (this.showErrorState) {
        this.$modal.msgWarning(
          `因【题库中题目被删除】或【抽题容器/随机策略中题目被复用】，导致配分异常，请重新编辑【${
            this.operationTypeText[this.examType]
          }配分】并发布${this.operationTypeText[this.examType]}`
        )
        return
      }
      this.stepIndex = 1
      if (!this.paperInfo.passingGrade) {
        this.paperInfo.passingGrade = parseInt(this.totalScore * 0.6)
      }
      let hasObjectiveTopic = this.checkObjectiveTopic();
      if (hasObjectiveTopic) {
        this.paperInfo.autoSettle = false
        this.autoSettleDisable = true
      } else {
        this.paperInfo.autoSettle = true
        this.autoSettleDisable = false
      }
      //工学一体课程  才有能力素养
      if (this.courseType == 3) {
        this.getEvaluateInfo()
      }
    },
    checkObjectiveTopic() {
      for (const titleItem of this.titleList) {
        if (titleItem.type == 1 && titleItem.topicList.length > 0) {
          for (const topicItem of titleItem.topicList) {
            if ([4, 5].includes(topicItem.topicType)) {
              console.log('找到单选题')
              return true
            }
          }
        }
        if (titleItem.type == 2 && titleItem.containerList.length > 0) {
          return true
        }
        if (titleItem.type == 3 && titleItem.tacticsList.length > 0) {
          for (const containerItem of titleItem.tacticsList) {
            if ([4, 5].includes(containerItem.topicType)) {
              return true
            }
          }
        }
      }
      return false
    },
    //添加随机策略
    async addTactics(item) {
      item.tableLoading = true
      try {
        let res = await addTacticsApi(this.examId, item.id)
        const { code, data } = res
        if (code == 200) {
          data.returnBolByNums = this.returnBolByNums
          item.tacticsList.push(data)
        }
      } catch (e) {
        console.error(e)
      } finally {
        item.tableLoading = false
      }
    },
    //删除随机策略
    delTactics(row) {
      this.$confirm('是否确认删除该随机策略？', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const loading = this.$loading({
            lock: true,
            text: '正在删除...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)'
          })
          try {
            let res = await removeTacticsApi(row.id)
            const { code } = res
            if (code == 200) {
              this.$modal.msgSuccess('删除成功')
              this.getPaperInfo()
            }
          } catch (e) {
            console.error(e)
          } finally {
            loading.close()
          }
        })
        .catch(() => {
          this.$modal.msgInfo('已取消')
        })
    },
    //编辑随机策略
    editTactics(row) {
      if (!row.indexId) {
        this.$modal.msgWarning('请选择知识点')
        return
      }
      if (!row.topicType && row.topicType != '0') {
        this.$modal.msgWarning('请选择题型')
        return
      }
      this.currentTacticsRow = row
      this.showTacticsDrawer = true
    },
    //更新随机策略
    async updateTacticsInfo(row) {
      if (!row.indexId || (!row.topicType && row.topicType != '0')) {
        return
      }
      try {
        let res = await updateTacticsInfoApi(
          row.id,
          row.indexId,
          row.topicType
        )
        const { code, data } = res
        if (code == 200) {
          data.returnBolByNums = this.returnBolByNums
          this.titleList.forEach((title) => {
            if (title.id === row.titleId) {
              let index = title.tacticsList.findIndex(
                (item) => item.id === row.id
              )
              title.tacticsList.splice(index, 1, data)
            }
          })
        }
      } catch (e) {
        console.error(e)
      }
    },
    //更新抽题容器table列表数据
    async updateContainerTable(e) {
      this.titleList.forEach((title) => {
        if (title.id === e.titleId) {
          title.tableLoading = true
        }
      })
      try {
        let res = await getContainerByIdApi(e.id)
        const { code, data } = res
        if (code == 200) {
          data.returnBolByNums = this.returnBolByNums
          this.titleList.forEach((title) => {
            if (title.id === e.titleId) {
              let topicNum = 0
              let index = title.containerList.findIndex(
                (item) => item.id === e.id
              )
              title.containerList.splice(index, 1, data)
              title.containerList.forEach((item) => {
                topicNum += item.extractNum
              })
              title.topicNum = topicNum
            }
          })
        }
      } catch (e) {
        console.log(e)
      } finally {
        this.titleList.forEach((title) => {
          if (title.id === e.titleId) {
            title.tableLoading = false
          }
        })
      }
    },
    //更新随机策略题目数量
    async updateTacticsNums(row, key, optionalKey) {
      if (!row[key] && row[key] != 0) {
        this.$modal.msgWarning('请输入随机数量')
        return
      }
      if (row[key] > row[optionalKey]) {
        this.$modal.msgWarning('随机数量不能大于难度题目总数')
        return
      }
      row.tableLoading = true
      try {
        let params = {
          tacticsId: row.id,
          unlimitedNum: row.unlimitedNum,
          easyNum: row.easyNum,
          normalNum: row.normalNum,
          hardNum: row.hardNum
        }
        let res = await updateTacticsNumApi(params)
        const { code } = res
        if (code == 200) {
          this.$modal.msgSuccess('题目数量更新成功')
          this.updateTacticsTable(row)
        }
      } catch (e) {
        console.error(e)
      } finally {
        row.tableLoading = false
      }
    },
    //更新随机策略table列表数据
    async updateTacticsTable(e) {
      this.titleList.forEach((title) => {
        if (title.id === e.titleId) {
          title.tableLoading = true
        }
      })
      try {
        let res = await getTacticsByIdApi(e.titleId)
        const { code, data } = res
        if (code == 200) {
          data.forEach((item) => {
            item.returnBolByNums = this.returnBolByNums
          })
          this.titleList.forEach((title) => {
            if (title.id === e.titleId) {
              title.tacticsList = data
              let topicNum = 0
              title.tacticsList.forEach((item) => {
                topicNum += item.extractNum
              })
              title.topicNum = topicNum
            }
          })
        }
      } catch (e) {
        console.log(e)
      } finally {
        this.titleList.forEach((title) => {
          if (title.id === e.titleId) {
            title.tableLoading = false
          }
        })
      }
    },
    returnBolByNums(row, key, optionalKey) {
      if (!row[key] && row[key] != 0) {
        return true
      }
      if (row[key] > row[optionalKey]) {
        return true
      }
      if (row[key] <= row[optionalKey]) {
        return false
      }
    },
    //更新抽题容器题目数量
    async updateContainerNums(row, key, optionalKey) {
      if (!row[key] && row[key] != 0) {
        this.$modal.msgWarning('请输入抽题数量')
        return
      }
      if (row[key] > row[optionalKey]) {
        this.$modal.msgWarning('抽题数量不能大于难度题目总数')
        return
      }
      row.tableLoading = true
      try {
        let params = {
          containerId: row.id,
          unlimitedNum: row.unlimitedNum,
          easyNum: row.easyNum,
          normalNum: row.normalNum,
          hardNum: row.hardNum
        }
        let res = await updateContainerNumApi(params)
        const { code } = res
        if (code == 200) {
          this.$modal.msgSuccess('题目数量更新成功')
          this.updateContainerTable(row)
        }
      } catch (e) {
        console.error(e)
      } finally {
        row.tableLoading = false
      }
    },
    //获取知识点列表
    async getCourseIndexTrees(id) {
      try {
        let res = await getCourseIndexTreesApi(id)
        const { code, data } = res
        if (code == 200) {
          this.courseIndexTree = data
        }
      } catch (e) {
        console.log(e)
      }
    },
    //添加抽题容器
    showEditContainer(row) {
      this.currentContainerRow = row
      this.showContainerDrawer = true
      if (this.globalDisabled) {
        this.containerDrawerTitle = '抽题容器详情'
      } else {
        this.containerDrawerTitle = '编辑抽题容器'
      }
    },
    //根据大题类型保存试题
    saveTopicByType(e) {
      //固定大题
      if (this.saveTopicType == 'fixed') {
        if (this.openTopicType == 'add') {
          this.addConnmonTopic(this.currentTitleId, e)
        } else {
          /**
           *  e.type==1 新增
           * e.type==2 保存并同步
           * e.type==3 保存并新增
           * */
          //保存并同步
          if (e.type == 2) {
            this.editConnmonTopic(e)
          } else {
            this.addConnmonTopic(this.currentTitleId, e);
          }
        }
      }
    },
    //锚点跳转
    scrollToAnchor(id) {
      const anchor = document.getElementById(id)
      if (anchor) {
        anchor.scrollIntoView({ behavior: 'smooth' })
      }
    },
    //删除固定大题小题(不会删除题库的题目)
    delFixTopic(row, titleItem) {
      this.$confirm(
        '删除后可从题库中再次选择题目加入试卷，是否确认删除？',
        '删除确认',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(async() => {
          const loading = this.$loading({
            lock: true,
            text: '正在删除...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)'
          })
          try {
            let res = await deleteConnmonTopicApi(
              row.paperTopicId,
              titleItem.id
            )
            const { code } = res
            if (code == 200) {
              this.$modal.msgSuccess('删除成功')
              this.getPaperInfo()
            }
          } catch (e) {
            console.error(e)
          } finally {
            loading.close()
          }
        })
        .catch(() => {
          this.$modal.msgInfo('已取消')
        })
    },
    //删除抽题容器
    removeContainer(row) {
      this.$confirm('是否确认删除该抽题容器？', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const loading = this.$loading({
            lock: true,
            text: '正在删除...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)'
          })
          try {
            let res = await removeContainerApi(row.id)
            const { code } = res
            if (code == 200) {
              this.$modal.msgSuccess('删除成功')
              this.getPaperInfo()
            }
          } catch (e) {
            console.error(e)
          } finally {
            loading.close()
          }
        })
        .catch(() => {
          this.$modal.msgInfo('已取消')
        })
    },
    //添加题目
    async addConnmonTopic(titleId, params) {
      const loading = this.$loading({
        lock: true,
        text: '正在处理...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      try {
        let res = await addConnmonTopicApi(titleId, params)
        const { code } = res
        if (code == 200) {
          this.$modal.msgSuccess('添加成功')
          this.getPaperInfo()
        }
      } catch (e) {
        console.error(e)
      } finally {
        loading.close()
      }
    },
    //修改题目
    async editConnmonTopic(params) {
      const loading = this.$loading({
        lock: true,
        text: '正在处理...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      try {
        let res = await editTopicApi(params)
        const { code } = res
        if (code == 200) {
          this.$modal.msgSuccess('编辑成功')
          this.getPaperInfo()
        }
      } catch (e) {
        console.error(e)
      } finally {
        loading.close()
      }
    },
    //添加抽题容器
    async addQuestionContainer(item) {
      item.tableLoading = true
      try {
        let res = await addContainerApi(this.paperInfo.id, item.id)
        const { code, data } = res
        if (code == 200) {
          data.returnBolByNums = this.returnBolByNums
          item.containerList.push(data)
        }
      } catch (e) {
        console.error(e)
      } finally {
        item.tableLoading = false
      }
    },
    //添加固定大题小题
    addTopic(item) {
      this.saveTopicType = 'fixed'
      this.showTopicState = true
      this.currentTitleId = item.id
      this.openTopicType = 'add'
    },
    //修改固定大题小题
    editTopic(item, row) {
      this.saveTopicType = 'fixed'
      this.showTopicState = true
      this.currentTitleId = item.id
      this.currentTopicId = row.id
      this.openTopicType = 'edit'
    },
    //上移
    turnUp(index) {
      if (index <= 0) {
        return
      }
      const temp = this.titleList[index]
      this.titleList.splice(index, 1)
      this.titleList.splice(index - 1, 0, temp)
      let ids = []
      for (const titleElement of this.titleList) {
        ids.push(titleElement.id)
      }
      this.saveTitleSort(ids.join(','))
    },
    //下移
    turnDown(index) {
      if (index >= this.titleList.length - 1) {
        return
      }
      const temp = this.titleList[index]
      this.titleList.splice(index, 1)
      this.titleList.splice(index + 1, 0, temp)
      let ids = []
      for (const titleElement of this.titleList) {
        ids.push(titleElement.id)
      }
      this.saveTitleSort(ids.join(','))
    },
    //保存大题排序
    async saveTitleSort(ids) {
      try {
        const res = await changeTitleSortApi(ids)
        if (res.code == 200) {
          this.$modal.msgSuccess('排序成功')
        }
      } catch (e) {
        console.error(e)
      }
    },
    //修改大题名称
    editBigTitle(item) {
      item.editTitle = false
      let params = {
        id: item.id,
        title: item.title
      }
      this.updatePaperTitle(params)
    },
    //修改大题乱序
    editOutOfOrder(item) {
      let params = {
        id: item.id,
        topicUnsort: item.topicUnsort,
        optionUnsort: item.optionUnsort
      }
      this.updatePaperTitle(params)
    },
    //修改大题接口
    async updatePaperTitle(params) {
      try {
        let res = await editTitleApi(params)
        const { code } = res
        if (code == 200) {
          this.$modal.msgSuccess('修改成功')
        }
      } catch (e) {
        console.error(e)
      }
    },
    //显示修改大题名称输入框
    showEditIpt(item) {
      item.editTitle = true
      this.$nextTick(() => {
        this.$refs.edit_title_ref[0].focus()
      })
    },
    //获取试卷信息
    async getPaperInfo(type) {
      this.showPaperLoading = true
      try {
        let res = await getPaperByPaperIdApi(this.examId)
        const { code, data } = res
        if (code == 200) {
          let paperInfo = data.paper
          //判断是否是新增，是的话吧submitType置为默认值
          if (!paperInfo.submitType) {
            paperInfo.submitType = 1
          }
          if (!paperInfo.duration) {
            paperInfo.duration = undefined
          }
          if (!paperInfo.passingGrade) {
            paperInfo.passingGrade = undefined
          }
          //回显提交方式
          this.scoreWeightTypes = []
          if (paperInfo.teacherScorePercent > 0) {
            this.scoreWeightTypes.push('1')
          } else {
            paperInfo.teacherScorePercent = undefined
          }
          if (paperInfo.selfScorePercent > 0) {
            this.scoreWeightTypes.push('2')
          } else {
            paperInfo.selfScorePercent = undefined
          }
          if (paperInfo.leaderScorePercent > 0) {
            this.scoreWeightTypes.push('3')
          } else {
            paperInfo.leaderScorePercent = undefined
          }
          if (paperInfo.otherGroupScorePercent > 0) {
            this.scoreWeightTypes.push('4')
          } else {
            paperInfo.otherGroupScorePercent = undefined
          }
          if (
            !paperInfo.teacherScorePercent &&
            !paperInfo.selfScorePercent &&
            !paperInfo.leaderScorePercent &&
            !paperInfo.otherGroupScorePercent
          ) {
            this.scoreWeightTypes = ['1']
          }
          if (paperInfo.duration > 0) {
            paperInfo.durationType = 1
          } else {
            paperInfo.durationType = 2
          }
          this.paperInfo = {
            ...this.paperInfo,
            ...paperInfo
          }
          //作业没有及格分  练习只有时长和总分
          if (this.examType == 6) {
            this.durationType = 2
            this.durationTypeDisabled = true
          }
          data.titleList.forEach((item, index) => {
            item.hideTable = false
            item.tableLoading = false
            item.showErrorClass = false
            if (type == 'addRefresh' && index == data.titleList.length - 1) {
              item.editTitle = true
              this.$nextTick(() => {
                this.$refs.edit_title_ref[0].focus()
                this.scrollToAnchor(item.id)
              })
            } else {
              item.editTitle = false
            }
            if (item.type == 2) {
              item.containerList.forEach((value) => {
                value.returnBolByNums = this.returnBolByNums
              })
            }
            if (item.type == 3) {
              item.tacticsList.forEach((value) => {
                value.returnBolByNums = this.returnBolByNums
              })
            }
          })
          this.titleList = data.titleList
          //存储数据库里的旧数据，用来监听试卷是否发生变化
          if (type == 'first') {
            this.hasPublish = data.paper.publish
            this.oldTitleList = JSON.parse(JSON.stringify(this.titleList))
            this.oldPaperInfo = JSON.parse(JSON.stringify(this.paperInfo))
          }
          this.$nextTick(() => {
            if (this.enterState != 'detail') {
              this.openDrag()
            }
          })
        }
      } catch (e) {
        console.log(e)
      } finally {
        this.showPaperLoading = false
        if (this.showBigLoading) {
          this.showBigLoading = false
        }
      }
    },
    //获取最大的sort
    getMaxSort(arr) {
      if (!arr || arr.length == 0) {
        return 1
      }
      let maxSort = 0
      arr.map((item) => {
        if (item.sort > maxSort) {
          maxSort = item.sort
        }
      })
      return maxSort + 1
    },
    //添加大题
    async addPaperTitleTopic(type) {
      this.showBigLoading = true
      let sort = this.getMaxSort(this.titleList)
      try {
        let params = {
          type,
          examId: this.examId,
          title: `第${this.titleList.length + 1}大题`,
          sort: sort
        }
        let res = await addPaperTitleApi(params)
        const { code } = res
        if (code == 200) {
          this.getPaperInfo('addRefresh')
        }
      } catch (e) {
        console.log(e)
      }
    },
    //删除大题
    removeTitleTopic(titleItem) {
      this.$confirm(
        '删除后会同时在试卷中删除大题中的所有小题，是否确认删除？',
        '删除确认',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(async() => {
          const loading = this.$loading({
            lock: true,
            text: '正在删除...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)'
          })
          try {
            let res = await removeTitleApi(titleItem.id)
            const { code } = res
            if (code == 200) {
              this.$modal.msgSuccess('删除成功')
              this.getPaperInfo()
            }
          } catch (e) {
            console.error(e)
          } finally {
            loading.close()
          }
        })
        .catch(() => {
          this.$modal.msgInfo('已取消')
        })
    },
    //切换统计类型
    changeTabs(type) {
      this.chartType = type
      if (type == 1) {
        let colors = [
          '#6796ff',
          '#53d2c6',
          '#6bcf86',
          '#f9c155',
          '#f36e63',
          '#a967ff'
        ]
        this.initChart(colors, this.toplicTypeData)
      } else {
        let colors = ['#6796ff', '#6bcf86', '#f9c155', '#f36e63']
        this.initChart(colors, this.difficultyData)
      }
    },
    //添加大题类型
    btnClick(item) {
      if (item) {
        this.addPaperTitleTopic(item.type)
      }
    },
    //初始化图表
    initChart(colors, data) {
      if (!this.myChart) {
        this.myChart = echarts.init(this.$refs.topic_ref)
      }
      var option
      option = {
        color: colors,
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '15%',
          orient: 'vertical',
          right: '2%'
        },
        series: [
          {
            name: '题型分析',
            type: 'pie',
            center: ['35%', '50%'],
            radius: ['50%', '80%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: data
          }
        ]
      }
      option && this.myChart.setOption(option)
    },
    // 下载试卷
    downloadPaper(){
      let data = this.checkScore()
      if (!data.hasPassed){
        this.$modal.msgWarning(data.warnText)
        this.scrollToAnchor(data.scrollId)
        return
      }
      if (this.showErrorState){
        this.$modal.msgWarning(`因【题库中题目被删除】或【抽题容器/随机策略中题目被复用】，导致配分异常，请重新编辑【${this.operationTypeText[this.examType]}配分】`)
        return
      }
      if(this.paperInfo.passingGrade>this.totalScore){
        this.$modal.msgWarning('及格分超出总分，请调整后下载')
        return
      }
      this.$refs.downloadPaperRef.handleShow(this.paperInfo.id,this.examType,this.paperInfo.title)
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../assets/styles/mixin.scss";

.container {
  width: 100%;
  background: #f5f6f7;
  display: flex;
  flex-direction: column;
  align-items: center;

  .header {
    width: 100%;
    height: 68px;
    display: flex;
    justify-content: center;
    background: #ffffff;
    align-items: center;
    box-shadow: 0 0 8px 0 rgba(9, 28, 61, 0.17);

    .header_content {
      width: 1400px;
      padding: 0 36px 0 20px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;

      .img_logo {
        display: flex;
        align-items: center;

        .logo {
          width: 41px;
          height: 44px;
        }

        .schoolPic_add {
          width: auto !important;
          height: 58px;
        }

        .txt {
          font-size: 18px;
          font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
          font-weight: 600;
          color: #333333;
          line-height: 68px;
          margin-left: 6px;
        }
      }

      .user_info {
        display: flex;
        align-items: center;
        gap: 0 10px;

        .name {
          font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
          font-size: 16px;
          color: #333333;
          font-weight: bold;
        }

        .user_avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
      }
    }
  }

  .main_content {
    margin-top: 20px;
    width: 1467px;
    background: #ffffff;
    border-radius: 16px 16px 0 0;
    height: calc(100vh - 88px);

    &_top {
      width: 100%;
      margin-top: 19px;
      padding: 0 16px;
      box-sizing: border-box;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .top_left {
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 600;
        font-size: 16px;
        color: #333333;
      }

      .top_right {
        display: flex;
        align-items: center;
        gap: 0 10px;

        .text {
          font-family: PingFangSC, PingFang SC, sans-serif;
          font-weight: 400;
          font-size: 16px;
          color: #333333;
          display: flex;
          align-items: center;

          span {
            width: 2px;
            height: 16px;
            background: #333333;
            margin: 0 6px;
          }
        }

        .score_btn {
          @include btn_plain(#28b28b, #ffffff) {
            width: 96px;
            height: 32px;
            border-radius: 8px;
            font-family: PingFangSC, PingFang SC, sans-serif;
            font-weight: 400;
            font-size: 14px;
            gap: 0 4px;
          }

          &:hover {
            background: #2a9e7c;
          }

          .score-icon {
            font-family: PingFangSC, PingFang SC, sans-serif;
            font-weight: 400;
            font-size: 18px;
            color: #ffffff;
          }
        }
      }
    }

    &_mid {
      width: 100%;
      height: calc(100% - 67px);
      border: 1px solid #ebebeb;
      border-radius: 2px;
      display: flex;

      .mid_left {
        height: 100%;
        width: 324px;
        border-right: 1px solid #ebebeb;

        .left_top {
          width: 100%;
          height: calc(100% - 280px);
          padding: 10px 8px;
          box-sizing: border-box;
          border-bottom: 1px solid #ebebeb;

          .top_botton {
            width: 100%;
            display: flex;
            justify-content: space-between;

            .add_btn {
              @include btn_plain(#f7f9fa, #333333) {
                width: 96px;
                height: 32px;
                border-radius: 8px;
                border: 1px solid #edeff0;
                font-family: PingFangSC, PingFang SC, sans-serif;
                font-weight: 400;
                font-size: 14px;
                color: #666666;
              }

              .add-icon {
                margin-right: 2px;
                font-family: PingFangSC, PingFang SC, sans-serif;
                font-weight: 400;
                font-size: 14px;
                color: #999999;
              }

              .question-icon {
                font-family: PingFangSC, PingFang SC, sans-serif;
                font-weight: 400;
                font-size: 10px;
                color: #999999;
                margin-left: 2px;
              }
            }
          }

          .topic_collect {
            width: 100%;
            height: calc(100vh - 502px);
            overflow: auto;
            padding: 0 8px;
            box-sizing: border-box;

            .empty_box {
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            }

            .topic_big_title {
              margin-top: 12px;
              width: 100%;
              font-family: PingFangSC, PingFang SC, sans-serif;
              font-weight: 500;
              font-size: 14px;
              color: #333333;
            }

            .topic_index_collect {
              margin-top: 12px;
              width: 100%;
              display: flex;
              flex-wrap: wrap;
              gap: 14px;

              .topic_index {
                width: 36px;
                height: 36px;
                border-radius: 50%;
                font-family: PingFangSC, PingFang SC, sans-serif;
                font-weight: 400;
                font-size: 14px;
                color: #999999;
                display: flex;
                justify-content: center;
                align-items: center;
                background: #ffffff;
                border: 1px solid #d4d4d4;
                user-select: none;
                cursor: pointer;

                &:hover {
                  border: 1px solid #28b28b;
                }
              }
            }
          }
        }

        .left_bottom {
          width: 100%;
          height: 280px;
          padding-top: 8px;
          box-sizing: border-box;

          .tabs {
            width: 100%;
            display: flex;
            justify-content: center;
            gap: 0 80px;

            .tab {
              font-family: PingFangSC, PingFang SC, sans-serif;
              font-weight: 400;
              font-size: 16px;
              color: #333333;
              user-select: none;
              cursor: pointer;
            }

            .line {
              width: 64px;
              height: 2px;
              background: #28b28b;
              position: absolute;
              left: 58px;
              transition: all 0.3s ease-in-out;
              bottom: -8px;
            }
          }

          .sign {
            top: 44px;
            left: 20px;
            position: absolute;
            color: #faad14;
            font-weight: 400;
            font-size: 14px;
            font-family: PingFangSC, PingFang SC, sans-serif;
            margin-right: auto;
          }

          .chart_item {
            width: 100%;
            height: 220px;
            margin-top: 20px;
          }
        }
      }

      .mid_right {
        width: 1143px;
        flex: 1;
        display: flex;
        flex-direction: column;

        .question_collect {
          flex: 1;
          overflow: auto;
          padding-bottom: 16px;
          box-sizing: border-box;

          .fixed_big_question {
            width: 100%;

            .big_top {
              width: 100%;
              padding: 16px 24px;
              box-sizing: border-box;
              display: flex;
              align-items: center;
              justify-content: space-between;

              .top_left {
                display: flex;
                align-items: center;
                gap: 0 12px;

                .big_title {
                  font-family: PingFangSC, PingFang SC, sans-serif;
                  font-weight: 500;
                  font-size: 14px;
                  color: #333333;
                }

                .el-icon-edit {
                  font-family: PingFangSC, PingFang SC, sans-serif;
                  font-weight: 500;
                  font-size: 14px;
                  color: #28b28b;
                  padding: 4px;
                  box-sizing: border-box;
                }

                .big_score {
                  font-family: PingFangSC, PingFang SC, sans-serif;
                  font-weight: 400;
                  font-size: 12px;
                  color: #999999;
                }
              }

              .top_right {
                display: flex;
                align-items: center;

                .icon_box {
                  margin-left: 32px;
                  display: flex;
                  align-items: center;
                  gap: 0 6px;

                  .noarmal_icon {
                    font-family: PingFangSC, PingFang SC, sans-serif;
                    font-weight: 500;
                    font-size: 24px;
                    color: #666666;
                    padding: 4px;
                    box-sizing: border-box;
                  }

                  .el-icon-delete {
                    font-family: PingFangSC, PingFang SC, sans-serif;
                    font-weight: 500;
                    font-size: 16px;
                    color: #666666;
                    padding: 4px;
                    box-sizing: border-box;
                  }
                }

                .collapse_box {
                  margin-left: 24px;
                  display: flex;
                  align-items: center;

                  span {
                    font-family: PingFangSC, PingFang SC, sans-serif;
                    font-weight: 400;
                    font-size: 16px;
                    color: #28b28b;
                    margin-right: 8px;
                  }
                }
              }
            }

            .big_table {
              padding: 0 24px;
              box-sizing: border-box;
              width: 100%;
              //height: 344px;
              overflow: hidden;
              transition: all 0.3s ease-in-out;

              .cum_table {
                width: 100%;
                border-radius: 8px;
                border: 1px solid #e8eaeb;

                .btn_content {
                  @include btn_plain(rgba(0, 0, 0, 0.06), #28b28b) {
                    width: 120px;
                    height: 32px;
                    border-radius: 4px;
                  }
                }

                .difficulty_ipt {
                  width: 100%;
                  display: flex;
                  justify-content: center;
                  align-items: center;

                  .el-icon-edit {
                    margin-left: 6px;
                    font-size: 16px;
                  }
                }

                .icon_box {
                  width: 100%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  gap: 0 8px;
                }
              }

              ::v-deep .el-table:before {
                height: 0;
              }
            }

            .big_btns {
              margin-top: 16px;
              width: 100%;
              padding: 0 24px;
              box-sizing: border-box;
              display: flex;
              align-items: center;
              gap: 0 16px;

              .blue_btn {
                @include plain_hover(#f3faff, #1677ff, #ffffff) {
                  width: 130px;
                  height: 32px;
                  border-radius: 8px;
                  border: 1px solid #1677ff;
                  gap: 0 4px;
                }
              }

              .orange_btn {
                @include plain_hover(#fff8ee, #e6a23b, #ffffff) {
                  width: 130px;
                  height: 32px;
                  border-radius: 8px;
                  border: 1px solid #e6a23b;
                  gap: 0 4px;
                }
              }

              .green_btn {
                @include plain_hover(#ecfffa, #28b28b, #ffffff) {
                  width: 88px;
                  height: 32px;
                  border-radius: 8px;
                  border: 1px solid #28b28b;
                  gap: 0 4px;
                }
              }
            }
          }

          .empty_box {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }

        .operation_button {
          width: 100%;
          height: 72px;
          display: flex;
          padding: 23px 24px 16px 24px;
          box-sizing: border-box;
          justify-content: space-between;
          border-top: 1px solid #e8e8e8;

          .left {
            display: flex;
            align-items: center;

            .delete_btn {
              @include plain_hover(#ffeeee, #e95756, #ffffff) {
                width: 88px;
                height: 32px;
                border-radius: 6px;
                font-family: PingFangSC, PingFang SC, sans-serif;
                font-weight: 400;
                font-size: 14px;
                border: 1px solid #f99999;
              }
            }

            .close_box {
              display: flex;
              align-items: center;
              gap: 0 16px;

              .delete_btn {
                @include plain_hover(#ffeeee, #e95756, #ffffff) {
                  width: 88px;
                  height: 32px;
                  border-radius: 6px;
                  font-family: PingFangSC, PingFang SC, sans-serif;
                  font-weight: 400;
                  font-size: 14px;
                  border: 1px solid #f99999;
                }
              }

              .close_btn {
                @include btn_plain(#ffffff, #696b6f) {
                  width: 88px;
                  height: 32px;
                  border-radius: 6px;
                  font-family: PingFangSC, PingFang SC, sans-serif;
                  font-weight: 400;
                  font-size: 14px;
                  border: 1px solid #dcdfe6;
                }

                &:hover {
                  background: #e7f6f3;
                  border: 1px solid #28b28b;
                  color: #28b28b;
                }

                &:active {
                  background: #e7f6f3;
                  border: 1px solid #28b28b;
                  color: #28b28b;
                }
              }
            }
          }

          .right {
            display: flex;
            align-items: center;
            gap: 0 16px;

            .sign_text {
              font-family: PingFangSC, PingFang SC, sans-serif;
              font-weight: 400;
              font-size: 14px;
              color: #f89a33;
            }

            .preview_btn {
              @include plain_hover(#ffffff, #28b28b, #ffffff) {
                width: 80px;
                height: 32px;
                border-radius: 8px;
                border: 1px solid #28b28b;
              }
            }

            .sure_btn {
              @include btn_plain(#28b28b, #ffffff) {
                width: 80px;
                height: 32px;
                border-radius: 8px;
              }

              &:hover {
                background: #2a9e7c;
              }
            }
            .download_btn{
              @include btn_plain(#28B28B, #ffffff) {
                width: 80px;
                height: 32px;
                border-radius: 8px;
              }

              &:hover {
                background: #2a9e7c;
              }
            }
          }
        }
      }
    }

    .step_mid {
      width: 100%;

      .content_box {
        width: 100%;
        height: calc(100vh - 227px);
        border-bottom: 1px solid #edeff0;
        border-top: 1px solid #edeff0;
        padding: 37px 0 0 120px;
        box-sizing: border-box;
        overflow: auto;

        .radio_item:nth-child(1) {
          margin-top: 6px;
          display: flex;
          align-items: center;
        }

        .radio_item:nth-child(2) {
          margin-top: 10px;
        }

        .ability_content {
          margin-top: 10px;
          display: flex;
          flex-wrap: wrap;
          align-content: flex-start;
          gap: 24px 40px;

          .ability_item {
            width: 348px;
            max-height: 244px;
            overflow: auto;
            padding: 16px 32px;
            box-sizing: border-box;
            background: #ffffff;
            border-radius: 12px;
            border: 1px solid #ebebeb;

            .title {
              font-size: 16px;
              font-family: PingFangSC, PingFang SC, sans-serif;
              font-weight: 400;
              line-height: 22px;
            }

            .param_list {
              display: flex;
              flex-wrap: wrap;
              justify-content: flex-start;

              .param_item {
                flex: 0.5;
                margin: 10px 0 0;
                display: flex;
              }
            }
          }
        }
      }

      .save_btns {
        width: 100%;
        padding: 23px 24px 16px 24px;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 0 16px;

        .sign {
          color: #faad14;
          font-weight: 400;
          font-size: 14px;
          font-family: PingFangSC, PingFang SC, sans-serif;
          margin-right: auto;
        }

        .edit_btns {
          display: flex;
          gap: 0 16px;
        }

        .preview_btn {
          @include plain_hover(#ffffff, #28b28b, #ffffff) {
            width: 80px;
            height: 32px;
            border-radius: 8px;
            border: 1px solid #28b28b;
          }
        }

        .prev_btn {
          @include plain_hover(rgba(40, 178, 139, 0.2), #28b28b, #ffffff) {
            width: 80px;
            height: 32px;
            border-radius: 8px;
            border: 1px solid #28b28b;
          }
        }

        .only_save_btn {
          @include plain_hover(#ffffff, #666666, #ffffff) {
            width: 92px;
            height: 32px;
            gap: 0 4px;
            border-radius: 8px;
            border: 1px solid #d3d2d2;
          }
        }

        .update_btn {
          @include btn_plain(#28b28b, #ffffff) {
            width: 104px;
            height: 32px;
            border-radius: 8px;
            gap: 0 4px;
          }

          &:hover {
            background: #2a9e7c;
          }
        }

        .sure_btn {
          @include btn_plain(#28b28b, #ffffff) {
            width: 80px;
            height: 32px;
            border-radius: 8px;
          }

          &:hover {
            background: #2a9e7c;
          }
        }
        .download_btn{
          @include btn_plain(#28B28B, #ffffff) {
            width: 80px;
            height: 32px;
            border-radius: 8px;
          }

          &:hover {
            background: #2a9e7c;
          }
        }
      }
    }
  }
}

.content_box{
  ::v-deep .el-form-item__label {
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 400;
    font-size: 16px;
  }
}

.input_number {
  width: 112px !important;
}
.total_score_tips{
  font-family: PingFangSC, PingFang SC, sans-serif;
  //font-weight: 400;
  font-size: 14px;
  color: #606266;
  font-weight: bold;
}

.w_134 {
  width: 134px !important;
}

.hide_height {
  height: 0 !important;
}

.icon_hover {
  &:hover {
    background: #f1f1f1;
    border-radius: 6px;
  }
}

.color_hover {
  &:hover {
    color: #28b28b;
  }
}

.selected {
  color: #28b28b !important;
}

.selected_line {
  left: 200px !important;
}

.m_5 {
  margin: 0 5px;
}

.disabled {
  opacity: 0.5;
  cursor: not-allowed;

  &:hover {
    background: transparent;
  }
}

.w_optional {
  width: 80px;
}

.w_fixed {
  width: 100%;
}

.content_html {
  position: relative;
  cursor: pointer;
  height: 100%;

  &:hover {
    user-select: none;

    &:after {
      content: "预览";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      color: #ffffff;
      background: rgba(0, 0, 0, 0.2);
    }
  }
}

.sign_box {
  width: 100%;
  display: flex;
  justify-content: center;
  position: fixed;
  top: 68px;
  left: 0;
  z-index: 10;

  .sign {
    width: 1467px;
    height: 40px;
    padding: 0 12px;
    box-sizing: border-box;
    background: #fffbe6;
    color: rgba(0, 0, 0, 0.88);
    font-weight: 400;
    font-size: 14px;
    font-family: PingFangSC, PingFang SC, sans-serif;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-icon-warning {
      color: #faad14;
      margin: 0 4px;
    }

    .el-icon-close {
      color: #83858a;
      margin: 0 4px;
    }
  }
}

.moved {
  padding: 6px;
  box-sizing: border-box;
  cursor: move;
  user-select: none;

  &:active {
    cursor: move !important;
  }

  .darg_svg {
    font-size: 20px;
    color: #000000;
  }
}

.error_checked {
  color: #f56c6c !important;
  animation: error_flash 0.3s 2;
  transition: all 0.3s ease-in-out;
  border-radius: 4px;
}

@keyframes error_flash {
  0%,
  50% {
    background: rgba(245, 108, 108, 0.5);
  }
  51%,
  100% {
    background: transparent; /* 或者使用 color: inherit; 恢复原始文字颜色 */
  }
}

.border_red {
  ::v-deep .el-input__inner {
    border: 1px solid #e95756 !important;
    color: #f56c6c !important;
  }
}
</style>
<style lang="scss">
.blue_message {
  background: #e6f4ff !important;
  border-radius: 8px !important;
  border: 1px solid #bae0ff !important;

  .el-message__content {
    color: #000000 !important;
    font-family: PingFangSC, PingFang SC, sans-serif;
  }

  i {
    color: #1677ff !important;
  }
}

.close_btn_message {
  color: #1677ff;
  margin-left: 12px;
  text-decoration: underline;
}

.driver-popover-description {
  font-family: PingFangSC, PingFang SC, sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #333333;
  white-space: pre-line !important;
  word-wrap: break-word;
}

.driver-popover.custom_popover button {
  flex: 1;
  text-align: center;
  background-color: #ffffff;
  color: #28b28b;
  border: 1px solid #28b28b;
  text-shadow: none;
  font-family: PingFangSC, PingFang SC, sans-serif;
  font-weight: 400;
  font-size: 14px;
  padding: 6px 16px;
  box-sizing: border-box;
  border-radius: 8px;
}

.driver-popover.custom_popover button:hover {
  background-color: #28b28b;
  color: #ffffff;
  border-color: #28b28b;
}

.driver-popover.custom_popover button:active {
  background-color: #59c1a3;
  color: #ffffff;
  border-color: #59c1a3;
}
</style>
